Open In App

Blaze UI Tables Clickable Table

Improve
Improve
Like Article
Like
Save
Share
Report

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



Last Updated : 09 May, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads