-
Notifications
You must be signed in to change notification settings - Fork 0
Table
import {
TableContainer,
Table,
TableHeader,
TableBody,
TableRow,
TableCell,
} from '@narimanb/wreactui'
I think you'll understand better the following sections with a complete, contextualized example.
Code
<TableContainer>
<Table>
<TableHeader>
<TableRow>
<TableCell>Client</TableCell>
<TableCell>Amount</TableCell>
<TableCell>Status</TableCell>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>
<div className="flex items-center text-sm">
<Avatar src="/img/avatar-1.jpg" alt="Judith" />
<span className="font-semibold ml-2">Judith Ipsum</span>
</div>
</TableCell>
<TableCell>
<span className="text-sm">$ 534.87</span>
</TableCell>
<TableCell>
<Badge type="success">success</Badge>
</TableCell>
</TableRow>
</TableBody>
<TableFooter>
<TableRow>
<TableCell colSpan={3}>
<Pagination
totalResults={1}
resultsPerPage={1}
onChange={() => {}}
/>
</TableCell>
</TableRow>
</TableFooter>
</Table>
</TableContainer>
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.
Code
<TableContainer>Table content goes here</TableContainer>
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.
Code
<TableContainer>
<Table>Table always sits inside the container</Table>
</TableContainer>
The TableHeader
is the thead
element with specific styles added to create a unique header for tables. This is where you place column titles.
Code
<TableContainer>
<Table>
<TableHeader>
<TableRow>
<TableCell>Name</TableCell>
<TableCell>Address</TableCell>
</TableRow>
</TableHeader>
</Table>
</TableContainer>
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.
Code
<TableContainer>
<Table>
<TableBody>
<TableRow>
<TableCell>SpongeBob</TableCell>
<TableCell>124 Conch Street</TableCell>
</TableRow>
</TableBody>
</Table>
</TableContainer>
The TableRow
maps to the tr
element and just apply minimum text styles. This is where you place table cells.
Code
<TableContainer>
<Table>
<TableBody>
<TableRow>
<TableCell>SpongeBob</TableCell>
<TableCell>124 Conch Street</TableCell>
</TableRow>
<TableRow>
<TableCell>Patrick</TableCell>
<TableCell>120 Conch Street</TableCell>
</TableRow>
</TableBody>
</Table>
</TableContainer>
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.
Code
<TableContainer>
<Table>
<TableBody>
<TableRow>
<TableCell>SpongeBob</TableCell>
<TableCell>124 Conch Street</TableCell>
</TableRow>
</TableBody>
</Table>
</TableContainer>
The TableFooter
placing it inside the Table
component.
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.
Code
<TableContainer>
<Table>
<TableFooter>
<TableRow>
<TableCell>
<Pagination
totalResults={1}
resultsPerPage={1}
onChange={() => {}}
/>
</TableCell>
</TableRow>
</TableFooter>
</Table>
</TableContainer>
Original source: Estevan Maito https://windmillui.com/react-ui