miscellaneous
States
Loading
You can set the table to a loading state controlling the tableOptions.state.isLoading. This will display skeleton rows
in the table while data is being fetched.
<DataTable tableOptions={{ state: { isLoading: true } }} />
Empty
If data is an empty array, the table will automatically display an empty state indicating that there is no data to show.
<DataTable data={[]} />
Custom Empty Content
You can provide your own custom content to show when data is empty by setting the emptyContent prop.
<DataTable
emptyContent={
<div>
<div>No cats found.</div>
<div style={{ marginTop: '8px' }}>
<Inline>
<Button small>Add Cat</Button>
<Inline.Separator />
<Button small variant='basic'>
Import Cats
</Button>
</Inline>
</div>
</div>
}
data={[]}
/>
Error
You can set the table to an error state with the error prop to true, e.g. if there was an error fetching data.
<DataTable error={true} />
Custom Error Content
You can provide your own custom content to show when there is an error by setting the errorContent prop.
<DataTable
error={true}
errorContent={
<div>
<div>Failed to load cats.</div>
<div style={{ marginTop: '8px' }}>
<Inline>
<Button small>Retry Fetch</Button>
<Inline.Separator />
<Button small variant='basic'>
View Details
</Button>
</Inline>
</div>
</div>
}
/>
Internal Columns
You can mark a column as internal by setting meta.internal to true in the column definition. This will add an
"internal" indicator to the column to highlight that the data in this column is only visible to Intility users.
const columns: Columns<Cat> = [
{
accessorKey: 'age',
header: 'Age',
meta: {
internal: true,
},
},
]
You have to provide the user state to the table, i.e. if the user is an internal user or not by setting intility to
true.
<DataTable intility={isUserIntilityUser(username)} />