Backpack UI
Components
Tables

Tables

The Table component is used for showing tabular data.

Usage


_10
import {
_10
Table,
_10
TableBody,
_10
TableCell,
_10
TableFooter,
_10
TableHead,
_10
TableRow,
_10
} from "@ef-global/backpack/Table";

Fixed Table

By default we set table-layout: fixed, meaning all columns will be an even size. You can set the layout to auto with the layoutAuto boolean prop.

Vertical alignment of cell content is set to middle by default. If you have multiline content in some cells and not others you can use the alignCellsTop boolean prop to improve readability.

The table is also wrapped in a ef-table-w wrapper element. This allow it to overflow gracefully and scroll on narrow devices.


onetwothreefourfivesix
loremipsumdolorsitametconsectetur
loremipsumdolorsitametconsectetur
loremipsumdolorsit ametconsectetur
loremipsumdolorsitametconsectetur
loremipsumdolorsitametconsectetur
loremipsumdolorsitametconsectetur
Total: 42

_69
<Table>
_69
<TableHead>
_69
<TableRow>
_69
<TableCell>one</TableCell>
_69
<TableCell>two</TableCell>
_69
<TableCell>three</TableCell>
_69
<TableCell>four</TableCell>
_69
<TableCell>five</TableCell>
_69
<TableCell>six</TableCell>
_69
</TableRow>
_69
</TableHead>
_69
<TableBody>
_69
<TableRow>
_69
<TableCell>lorem</TableCell>
_69
<TableCell>ipsum</TableCell>
_69
<TableCell>dolor</TableCell>
_69
<TableCell>sit</TableCell>
_69
<TableCell>amet</TableCell>
_69
<TableCell>consectetur</TableCell>
_69
</TableRow>
_69
<TableRow>
_69
<TableCell>lorem</TableCell>
_69
<TableCell>ipsum</TableCell>
_69
<TableCell>dolor</TableCell>
_69
<TableCell>sit</TableCell>
_69
<TableCell>amet</TableCell>
_69
<TableCell>consectetur</TableCell>
_69
</TableRow>
_69
<TableRow>
_69
<TableCell>lorem</TableCell>
_69
<TableCell>ipsum</TableCell>
_69
<TableCell>dolor</TableCell>
_69
<TableCell>sit </TableCell>
_69
<TableCell>amet</TableCell>
_69
<TableCell>consectetur</TableCell>
_69
</TableRow>
_69
<TableRow>
_69
<TableCell>lorem</TableCell>
_69
<TableCell>ipsum</TableCell>
_69
<TableCell>dolor</TableCell>
_69
<TableCell>sit</TableCell>
_69
<TableCell>amet</TableCell>
_69
<TableCell>consectetur</TableCell>
_69
</TableRow>
_69
<TableRow>
_69
<TableCell>lorem</TableCell>
_69
<TableCell>ipsum</TableCell>
_69
<TableCell>dolor</TableCell>
_69
<TableCell>sit</TableCell>
_69
<TableCell>amet</TableCell>
_69
<TableCell>consectetur</TableCell>
_69
</TableRow>
_69
<TableRow>
_69
<TableCell>lorem</TableCell>
_69
<TableCell>ipsum</TableCell>
_69
<TableCell>dolor</TableCell>
_69
<TableCell>sit</TableCell>
_69
<TableCell>amet</TableCell>
_69
<TableCell>consectetur</TableCell>
_69
</TableRow>
_69
</TableBody>
_69
<TableFooter>
_69
<TableRow>
_69
<TableCell colSpan={6}>
_69
<strong>Total:</strong> 42
_69
</TableCell>
_69
</TableRow>
_69
</TableFooter>
_69
</Table>


Bordered


onetwothreefourfivesix
loremipsumdolorsitametconsectetur
loremipsumdolorsitametconsectetur
loremipsumdolorsit ametconsectetur
loremipsumdolorsitametconsectetur
loremipsumdolorsitametconsectetur
loremipsumdolorsitametconsectetur
Total: 42

_10
<Table bordered>
_10
...
_10
</Table>

Filled


onetwothreefourfivesix
loremipsumdolorsitametconsectetur
loremipsumdolorsitametconsectetur
loremipsumdolorsit ametconsectetur
loremipsumdolorsitametconsectetur
loremipsumdolorsitametconsectetur
loremipsumdolorsitametconsectetur
Total: 42

_10
<Table filled>
_10
...
_10
</Table>

Striped


onetwothreefourfivesix
loremipsumdolorsitametconsectetur
loremipsumdolorsitametconsectetur
loremipsumdolorsit ametconsectetur
loremipsumdolorsitametconsectetur
loremipsumdolorsitametconsectetur
loremipsumdolorsitametconsectetur
Total: 42

_10
<Table striped>
_10
...
_10
</Table>

Combined


onetwothreefourfivesix
loremipsumdolorsitametconsectetur
loremipsumdolorsitametconsectetur
loremipsumdolorsit ametconsectetur
loremipsumdolorsitametconsectetur
loremipsumdolorsitametconsectetur
loremipsumdolorsitametconsectetur
Total: 42

_10
<Table striped bordered>
_10
...
_10
</Table>

SurfacesTabs