Table

The root of the table family. Renders a <table> with collapsed borders and full width, and broadcasts cell config (size, cellPadding, hasStickyHeader) to descendant TableCells via TableContext.

import { Table, TableHead, TableBody, TableRow, TableCell } from '@soroush.tech/design-system/Table'

;<Table size="sm" hasStickyHeader>
  <TableHead>...</TableHead>
  <TableBody>...</TableBody>
</Table>

Examples

Default

	Region	Status
web	fra1	healthy	42
api	fra1	healthy	87
worker	iad1	degraded	213
cron	iad1	healthy	55
edge	sin1	healthy	12
db-proxy	fra1	healthy	31
queue	sfo1	degraded	158
auth	fra1	healthy	64
cdn	global	healthy	8
search	iad1	healthy	96
mailer	sfo1	healthy	120
metrics	sin1	degraded	176

const args: Partial<TableProps> = {}

<DeploymentsTable {...args} />

Composed

	Region	Status
web	fra1	healthy	42
api	fra1	healthy	87
worker	iad1	degraded	213
cron	iad1	healthy	55
edge	sin1	healthy	12
db-proxy	fra1	healthy	31
queue	sfo1	degraded	158
auth	fra1	healthy	64
cdn	global	healthy	8
search	iad1	healthy	96
mailer	sfo1	healthy	120
metrics	sin1	degraded	176
Total services			12

const args: Partial<TableProps> = {}

<TableContainer maxHeight="320px" borderColor="light" borderWidth="thin" borderStyle="solid">
  <DeploymentsTable hasStickyHeader {...args}>
    <TableFooter>
      <TableRow>
        <TableCell colSpan={3}>Total services</TableCell>
        <TableCell align="right">{deployments.length}</TableCell>
      </TableRow>
    </TableFooter>
  </DeploymentsTable>
</TableContainer>

Dense

	Region	Status
web	fra1	healthy	42
api	fra1	healthy	87
worker	iad1	degraded	213
cron	iad1	healthy	55
edge	sin1	healthy	12
db-proxy	fra1	healthy	31
queue	sfo1	degraded	158
auth	fra1	healthy	64
cdn	global	healthy	8
search	iad1	healthy	96
mailer	sfo1	healthy	120
metrics	sin1	degraded	176

<DeploymentsTable size="sm" bg="paper" />

Row Selection

		Region	Status
	web	fra1	healthy	42
	api	fra1	healthy	87
	worker	iad1	degraded	213
	cron	iad1	healthy	55
	edge	sin1	healthy	12
0 of 12 selected	Rows per page: 1-5 of 12

<SelectableTable />

Table API reference