# Tables
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
Home
/ Tables
1rem
1import { Table } from "funuicss";1 lines • 33 chars
#
Simple Table
This is s simple table consisting of course column, creator, students and ratings
React / Next.js
Table
The Table is used to create a table
| Prop | Description | Value(s) |
|---|---|---|
| `stripped` | Adds zebra stripes to table rows (inverted by `noStripped`) | `Boolean` |
| `bordered` | Adds borders to the table and its cells | `Boolean` |
| `hoverable` | Adds hover effect to rows for better interactivity | `Boolean` |
| `light` | Applies a light theme to the table | `Boolean` |
| `dark` | Applies a dark theme to the table | `Boolean` |
| `head` | Custom table header content as ReactNode | `ReactNode` |
| `body` | Custom table body content as ReactNode | `ReactNode` |
| `title` | Title displayed above the table | `String` |
| `funcss` | Custom CSS or utility classes to style the table container | `String` |
| `showTotal` | Shows the total number of items in the table | `Boolean` |
| `isLoading` | Displays a loading state when data is being fetched | `Boolean` |
| `data` | Table data with fields, values, and column titles | `{ fields: string[], data: any[], titles: string[] }` |
| `right` | Element placed on the top-right of the table (e.g. actions, filters) | `ReactNode` |
| `height` | Height of the table (useful for scrollable tables) | `Number (px)` |
| `pageSize` | Number of rows to display per page | `Number` |
| `customColumns` | Override columns with custom render logic | `{ title: string; render: (data) => ReactNode; onClick?: (data) => void }[]` |
| `filterableFields` | List of data field names to make filterable/searchable | `String[]` |
| `children` | Optional React children to render inside the table container | `ReactNode` |
| `emptyResponse` | Change the data that is responded when the table is empty | `{icon?:React.ReactNode , title?:React.ReactNode , subtitle:React.ReactNode}` |