Tables group content in to rows and columns. Create nice and responsive css tables, create simple tables, stripped tables, hoverable table, borederd table and responsive table with funcss
Table
The Table is used to create a table
| Prop | Description | Value(s) |
|---|---|---|
| `stripped` | To add zebra strips to your table | `Boolean` |
| `bordered` | Add a border to your table | `Boolean` |
| `hoverable` | Add hoverable effect to rows | `Boolean` |
| `light` | Creates a light theme | `Boolean` |
| `dark` | Creates a dark theme | `Boolean` |
| `head` | The head of the table | `ReactNode` |
| `body` | The head of the table | `ReactNode` |
#
Simple Table
This is s simple table consisting of course column, creator, students and ratings
React / Next.js Show Source Code
| course | creator | students | ratings |
| Introduction to React | John Doe | 50 | 4.8 |
| JavaScript Fundamentals | Jane Smith | 35 | 4.5 |
| Web Development Basics | Mike Johnson | 45 | 4.7 |
| Advanced CSS Techniques | Sarah Williams | 30 | 4.9 |
| Node.js for Beginners | David Brown | 25 | 4.6 |
#
Stripped
The stripped prop adds a zebra stripped effect on the table
React / Next.js Show Source Code
| course | creator | students | ratings |
| Introduction to React | John Doe | 50 | 4.8 |
| JavaScript Fundamentals | Jane Smith | 35 | 4.5 |
| Web Development Basics | Mike Johnson | 45 | 4.7 |
| Advanced CSS Techniques | Sarah Williams | 30 | 4.9 |
| Node.js for Beginners | David Brown | 25 | 4.6 |
#
Bordered
The bordered prop adds border lines to your table.
React / Next.js Show Source Code
| course | creator | students | ratings |
| Introduction to React | John Doe | 50 | 4.8 |
| JavaScript Fundamentals | Jane Smith | 35 | 4.5 |
| Web Development Basics | Mike Johnson | 45 | 4.7 |
| Advanced CSS Techniques | Sarah Williams | 30 | 4.9 |
| Node.js for Beginners | David Brown | 25 | 4.6 |