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: [{ icon: 'log-in', action: impersonateUser }]

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