Table

Table is used to display structured data in rows and columns.

npx jsx-daisyui add table

Default

table-default

#	Name	Role	Status
1	Alice Johnson	Admin	Active
2	Bob Martinez	Editor	Active
3	Carol White	Viewer	Inactive

table-zebra

table-sizes

Name	Role
Alice	Admin
Bob	Editor

Name	Role
Alice	Admin
Bob	Editor

Name	Role
Alice	Admin
Bob	Editor

Name	Role
Alice	Admin
Bob	Editor

table-bordered

Prop	Type	Default	Description
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	The size of the table.
`zebra`	`boolean`	-	Applies alternating background colors to rows.
`pinRows`	`boolean`	-	Makes table headers sticky at the top.
`pinCols`	`boolean`	-	Makes the first column sticky on the left.
`bordered`	`boolean`	-	Adds a border around the table container.
`wrapperClassName`	`string`	-	Custom classes applied to the div wrapper.

Table is used to display structured data in rows and columns.

npx jsx-daisyui add table

table-default

#	Name	Role	Status
1	Alice Johnson	Admin	Active
2	Bob Martinez	Editor	Active
3	Carol White	Viewer	Inactive

table-zebra

table-sizes

Name	Role
Alice	Admin
Bob	Editor

Name	Role
Alice	Admin
Bob	Editor

Name	Role
Alice	Admin
Bob	Editor

Name	Role
Alice	Admin
Bob	Editor

table-bordered

Prop	Type	Default	Description
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	The size of the table.
`zebra`	`boolean`	-	Applies alternating background colors to rows.
`pinRows`	`boolean`	-	Makes table headers sticky at the top.
`pinCols`	`boolean`	-	Makes the first column sticky on the left.
`bordered`	`boolean`	-	Adds a border around the table container.
`wrapperClassName`	`string`	-	Custom classes applied to the div wrapper.