Blaze UI Tables Clickable Row
Blaze UI is a CSS open-source lightweight UI toolkit that provides great tools for building customized and scalable applications. It can work with any framework that exists. It can adapt to any ecosystem. All designs or CSS are mobile-first and hence responsive.
In this article, we will see Tables Clickable Row in Blaze UI. Blaze UI provides them with clickable row in its framework for the users to make the table row clickable.
Blaze UI Tables Clickable Row classes:
- c-table__row–clickable: This class is used to add a tables clickable row to the webpage.
Syntax:
<tr class="c-table__row c-table__row--clickable">
<td class="c-table__cell">
...
</td>
</tr>
Example 1: The following code demonstrates the Blaze UI Tables Clickable Row.
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 Tables Clickable Row</h2> <table class="c-table"> <thead class="c-table__head"> <tr class="c-table__row c-table__row--heading"> <th class="c-table__cell">Duration</th> <th class="c-table__cell">Course</th> <th class="c-table__cell">User</th> </tr> </thead> <tbody class="c-table__body"> <tr class="c-table__row c-table__row--disabled"> <td class="c-table__cell">1 month</td> <td class="c-table__cell">DSA</td> <td class="c-table__cell">Geek1</td> </tr> <tr class="c-table__row c-table__row--clickable"> <td class="c-table__cell">2 Month</td> <td class="c-table__cell">JavaScript</td> <td class="c-table__cell">Geek2</td> </tr> </tbody> </table> </div> </body> </html> |
Output:
Example 2: The following example demonstrates the Blaze UI Striped Tables clickable row.
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 Tables Clickable Row</h2> <table class="c-table c-table--striped"> <thead class="c-table__head"> <tr class="c-table__row c-table__row--heading"> <th class="c-table__cell">Price</th> <th class="c-table__cell">Course</th> <th class="c-table__cell">Description</th> </tr> </thead> <tbody class="c-table__body"> <tr class="c-table__row c-table__row--disabled"> <td class="c-table__cell">$15</td> <td class="c-table__cell">DSA</td> <td class="c-table__cell"> Fundamentals of Programming </td> </tr> <tr class="c-table__row c-table__row--clickable"> <td class="c-table__cell">$10</td> <td class="c-table__cell">JavaScript</td> <td class="c-table__cell"> Introduction to JavaScript </td> </tr> <tr class="c-table__row c-table__row--clickable"> <td class="c-table__cell">$12</td> <td class="c-table__cell">Python</td> <td class="c-table__cell"> Introduction to Python </td> </tr> </tbody> </table> </div> </body> </html> |
Output:
Reference: https://www.blazeui.com/components/tables/
Please Login to comment...