Skip to content
Related Articles

Related Articles

Blaze UI Tables Clickable Table

View Discussion
Improve Article
Save Article
  • Last Updated : 09 May, 2022

Blaze UI is a free open source UI Toolkit that provides a great structure for building websites quickly with a scalable and maintainable foundation. All components in Blaze UI are developed mobile-first and rely solely on native browser features, not a separate library or framework. It helps us to create a scalable and responsive website fast and efficiently with a consistent style.

In this article, we will see Clickable Tables in Blaze UI. Blaze UI provides the clickable table in its framework for the users to make the whole table row clickable.

Blaze UI Clickable Table classes:

  • c-table–clickable: This class is used to add a clickable table to the webpage.

Syntax:

<table class="c-table c-table--clickable">
      <thead class="c-table__head">
         ...
      </thead>
      <tbody class="c-table__body">
        ...
      </tbody>
</table>

Example 1: Below example demonstrates the Blaze UI basic clickable table.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href=
    <script type="module" src=
    </script>
    <script nomodule="" src=
    </script>
</head>
 
<body>
    <div class="o-container o-container--medium">
        <h1 style="color: green">GeeksforGeeks</h1>
        <h2>Blaze UI Clickable Table</h2>
 
        <table class="c-table c-table--clickable">
            <caption class="c-table__caption">
                Clickable table with disabled row
            </caption>
             
            <thead class="c-table__head">
                <tr class="c-table__row c-table__row--heading">
                    <th class="c-table__cell">Courses</th>
                    <th class="c-table__cell">Description</th>
                    <th class="c-table__cell">Price</th>
                </tr>
            </thead>
            <tbody class="c-table__body">
                <tr class="c-table__row c-table__row--disabled">
                    <td class="c-table__cell">Intro to Java</td>
                    <td class="c-table__cell">
                        Fundamentals of Java using OOPs
                    </td>
                    <td class="c-table__cell">$15</td>
                </tr>
                <tr class="c-table__row">
                    <td class="c-table__cell">
                        Intro to Python
                    </td>
                    <td class="c-table__cell">
                        Data Science Fundamentals
                    </td>
                    <td class="c-table__cell">$10</td>
                </tr>
                <tr class="c-table__row">
                    <td class="c-table__cell">DSA</td>
                    <td class="c-table__cell">
                        Data Structures and Algorithms
                    </td>
                    <td class="c-table__cell">$20</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
 
</html>

Output:

 

Example 2: Below example demonstrates the Blaze UI Striped clickable table.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href=
 
    <script type="module" src=
    </script>
    <script nomodule="" src=
    </script>
</head>
 
<body>
    <div class="o-container o-container--medium">
        <h1 style="color: green">GeeksforGeeks</h1>
        <h2>Blaze UI Clickable Table</h2>
 
        <table class="c-table c-table--clickable c-table--striped">
            <thead class="c-table__head">
                <tr class="c-table__row c-table__row--heading">
                    <th class="c-table__cell">Courses</th>
                    <th class="c-table__cell">Description</th>
                    <th class="c-table__cell">Price</th>
                </tr>
            </thead>
            <tbody class="c-table__body">
                <tr class="c-table__row c-table__row--disabled">
                    <td class="c-table__cell">Intro to C++</td>
                    <td class="c-table__cell">OOPs</td>
                    <td class="c-table__cell">$25</td>
                </tr>
                <tr class="c-table__row">
                    <td class="c-table__cell">
                        Data Science Expert Course
                    </td>
                    <td class="c-table__cell">
                        Data Science Fundamentals
                    </td>
                    <td class="c-table__cell">$40</td>
                </tr>
                <tr class="c-table__row">
                    <td class="c-table__cell">
                        Analysis of Algorithms
                    </td>
                    <td class="c-table__cell">Algorithms</td>
                    <td class="c-table__cell">$30</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
 
</html>

Output:

 

Reference: https://www.blazeui.com/components/tables


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!