Table
Are you familiar with the pain of marking up HTML tables? I don't think I'll ever forget it. Fortunately, you'll never have to mark up another table again.
Pass a JSON object to the
<Table> component and let Gravity create the markup, filtering, sorting and searching.
<Table
search
data={ users.data }
loading={ users.loading }
show={['name', 'email', 'status', 'permission']}
/>
Prop | Description | Required | Value |
|---|---|---|---|
actions | object with edit/delete/email or custom callback functions | optional | |
badge | object containing column name and color to highlight column values with a badge component | optional | |
bulkActions | global actions array when using selectable prop | optional | |
data | table data | required | |
hide | columns (object key names) to hide | optional | array |
loading | toggle loading spinner | optional | boolean |
search | optional | boolean | |
selectable | user can select table rows | optional | boolean |
show | columns (object key names) to show | optional | array |
naked | remove the styling | optional | boolean |
throttle | throttle the search callback function (milliseconds) | optional | integer |
Pass a header array to the table if you'd like to customise the column headings. If no header is specified, Gravity will use the object key names from the table body and format them appropriately.
{
header: [
{ name: 'name', title: 'Name', sort: true },
{ name: 'email', title: 'Email', sort: true },
{ name: 'plan', title: 'Billing Plan', sort: false }
],
}
The table body contains an array of objects - each array item generates a new row, and each key/value pair will be mapped to a column.
// without custom headers
const data = [
{ id: 1, name: 'Joseph Sandoval', email: '[email protected]', plan: 'startup' },
{ id: 2, name: 'Alan Reed', email: '[email protected]', plan: 'startup' },
{ id: 3, name: 'Maria Sanchez', email: '[email protected]', plan: 'startup' },
]
// with custom headers
const data = {
header: [
{ name: 'name', title: 'Name', sort: true },
{ name: 'email', title: 'Email', sort: true },
{ name: 'plan', title: 'Billing Plan', sort: false }
],
body: [
{ id: 1, name: 'Joseph Sandoval', email: '[email protected]', plan: 'startup' },
{ id: 2, name: 'Alan Reed', email: '[email protected]', plan: 'startup' },
{ id: 3, name: 'Maria Sanchez', email: '[email protected]', plan: 'startup' },
]
}
You can add global actions to all table rows by passing an action object with callback functions. There are some preset actions included for viewing detail pages or downloading files.
Clicking on an action button will automatically return the data of the row it belongs to so you can access IDs and values.
<Table
data={ tableData }
actions={{
edit: editUser,
delete: deleteUser,
download: 'download_url', // download a file
email: true, // show a button to email
view: { url: `/events/${id}`, col: 'id' } // will load this url + /id
}}
/>
You can also add an array of custom actions to be rendered on each table row. Custom actions can be conditionally rendered based on a column value using the optional condition key.
custom: [{
icon: 'log-in',
action: impersonateUser,
condition: { col: 'active', value: true }
}]
You can enable bulk selecting and actions on a table by passing the
selectable and bulkActions props together.<Table
selectable
data={ apiKeys }
bulkActions={{
delete: deleteKey,
custom: [
{ text: 'Revoke', color: 'orange', action: revokeKey
]
}}
/>
Bulk delete is supported by default, and you can add your own custom bulk actions using the
custom array. There is a full working example on the API keys list view where you can select and delete multiple keys simultaneously.
You can also add unique actions to each row by attaching an actions object to that row in your data object. Row actions overwrite global actions.
Both the
edit and delete actions will pass a callback to your function that you can then use to live edit or delete the table row. You can see an example in /account/users.You can render a colored badge in your table rows using the
badge prop. If you need to use conditional colors, pass an array of conditions and the table cell will test them.badge={{ col: 'status', color: 'blue', condition: [
{ value: 'registered', color: 'green' },
{ value: 'invited', color: 'blue' }
]}}
Last modified 8h ago