Table
Remember the pain of marking up HTML tables? I don't think I'll ever forget it. Fortunately - with Gravity - you'll never have to mark up another table again.
Simply pass a JSON object to the <Table> component and let Gravity create the markup, filtering, sorting and searching.
<Table
data={ tableObject }
search
badge={{ col: 'plan', color: 'blue' }}>
</Table>
prop | description | value |
data | data object containing headers (optional) and body object | object |
search | toggle a search field for filtering the table | true or false |
sort | allow the table columns to be sorted | true or false |
loading | toggle a loading spinner (optional) | true or false |
badge | object containing column name and color to highlight column values with a badge component (optional) | object |
show | (optional) filter to determine which columns to show (object key names) | string array |
hide | (optional) filter to determine which columns to hide (object key names) | true or false |
actions | object with edit/delete keys set to callback functions | true or false |
throttle | throttle the callback function execution (milliseconds) when using a search component | integer |
You can 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.
table: {
header: [
{ name: 'name', title: 'Name', sort: true },
{ name: 'email', title: 'Email', sort: true },
{ name: 'plan', title: 'Billing Plan', sort: false }
],
}
You can add a sort boolean if you'd like the column to be sortable in ascending or descending order.
The table body contains an array of objects - each array item generates a new row and each key/value pair will be mapped to its own column.
table: {
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 row by passing an action object with callback functions.
Clicking on an action button will automatically return that row data so you can access IDs and values.
<Table
data={ tableData }
actions={{
edit: editUser,
delete: deleteUser,
download: 'download_url',
view: '/dashboard' // will load this url + /rowID
}}
/>
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.
<Table
selectable
data={ keys }
bulkActions={{
delete: deleteKey,
custom: [
{ text: 'Revoke', color: 'orange', action: revokeKey
]
}}
/>
Bulk delete is supported by default but you can add your own custom bulk actions using the custom array.
There is a full working example in on the API keys list view where you can select and delete multiple keys at once.
You can also add actions to each individual row by attaching an actions object to that row. 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 update 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, you can simply pass an array of conditions and the table cell will check them.
badge={{ col: 'status', color: 'blue', condition: [
{ value: 'registered', color: 'green' },
{ value: 'invited', color: 'blue' }
]}}
Last modified 16d ago