Data table


import {
} from '@windmill/react-ui'

Complete example

I think you'll understand better the following sections with a complete, contextualized example.

Judith Ipsum
$ 534.87success
Showing 1-4 of 10
live editor

Table container

The TableContainer is responsible for containing the entire table inside borders and keeps it responsible. In smaller screens, the table will gently show a horizontal scroll.

Table content goes here
live editor


The Table is exaclty the table element, and you won't find it's styles in the defaultTheme because they are just the minimum necessary for it to work well inside the container.

Table always sits inside the container
live editor

Table header

The TableHeader is the thead element with specific styles added to create a unique header for tables. This is where you place column titles.

live editor

Table body

The TableBody is the tbody element with specific styles added to create unique table styles, like the division between rows. This is where you place general table data rows.

SpongeBob124 Conch Street
live editor

Table row

The TableRow maps to the tr element and just apply minimum text styles. This is where you place table cells.

SpongeBob124 Conch Street
Patrick120 Conch Street
live editor

Table cell

The TableCell is responsible for the td element and also just apply bare minimum styles. This is the smaller piece of a table and you should put all your data inside it.

SpongeBob124 Conch Street
live editor

The TableFooter with it's name may trick some into placing it inside the Table component but, for flexibility, it sits outside of the Table but still inside of the TableContainer.

In the vast majority of the cases where this component is needed, is to offer a Pagination component for the table.

Read Pagination docs for more.

Showing 1-1 of 1
live editor


See Customization to learn how to change defaultTheme styles.