# 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 
import { Table } from "funuicss";
#
Simple Table
This is s simple table consisting of course column, creator, students and ratings
React / Next.js
Records: 30
Employee Records
FullNameAgeAddressEmailCountryEdit
John Doe25123 Main Stjohn.doe@example.comUSA
Jane Smith30456 Elm Stjane.smith@example.comCanada
Alice Johnson28789 Oak Stalice.johnson@example.comUK
Michael Brown35101 Pine Stmichael.brown@example.comUSA
Emily Wilson27234 Maple Stemily.wilson@example.comGermany
David Lee40567 Birch Stdavid.lee@example.comFrance
Sophia Martinez29890 Cedar Stsophia.martinez@example.comCanada
James Taylor32321 Oak Stjames.taylor@example.comUK
Olivia Garcia31654 Elm Stolivia.garcia@example.comJapan
Daniel Rodriguez26987 Maple Stdaniel.rodriguez@example.comChina
Table
The Table is used to create a table
PropDescriptionValue(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`
Previous
Inputs
Next
List