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.

data={ tableObject }
badge={{ col: 'plan', color: 'blue' }}>






data object containing headers (optional) and body object



toggle a search field for filtering the table

true or false


allow the table columns to be sorted

true or false


toggle a loading spinner (optional)

true or false


object containing column name and color to highlight column values with a badge component (optional)



(optional) filter to determine which columns to show (object key names)

string array


(optional) filter to determine which columns to hide (object key names)

true or false


object with edit/delete keys set to callback functions

true or false


throttle the callback function execution (milliseconds) when using a search component


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.


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.

data={ tableData }
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' }