Gravity
Search
⌃K

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>

Props

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

Table Data Object

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.

Body

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' },
]
}

Table Actions

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
}}
/>

Custom Actions

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 }}]

Bulk Actions

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.

Individual Row Actions

You can also add actions to each individual row by attaching an actions object to that row. Row actions overwrite global actions.

Editing and Deleting Rows

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.

Table Badges

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