Table

First Name Last Name Email Actions
David Bowman david@usegravity.app Delete Edit
Kyle Gawley kyle@usegravity.app Delete Edit

Table Data Format

Before rendering a table, you should ensure that your data is correctly formatted.

You can pass an object directly to the table as a prop or pass an API endpoint as a string and the table will load the remote data.

Table Header

You can pass a header to the table if you'd like to customise the titles. 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 }
  ],
}

Table Body

The table body is an array of objects.

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: 'joseph_88@example.com', plan: 'startup' },
    { id: 2, name: 'Alan Reed', email: 'alan_reed@example.com', plan: 'startup' },
    { id: 3, name: 'Maria Sanchez', email: 'maria_86@example.com', plan: 'startup' },
  ]
}

Props

  • data - object containging headers (optional) and body OR API endpoint.
  • search - boolean that toggles search field
  • loading - boolean to toggle loading spinner
  • badge - object containing column name and color to highlight a column with a badge
  • showIds - render the row IDs on the table
  • naked - don't render any styling
<Table
  naked={ false }
  showIds={ false }
  data={ this.state.table }
  search={ true }
  loading={ this.state.loading }
  badge={{ col: 'plan', color: 'blue' }}>
</Table>

Table Actions

You can add your own action buttons to each table row for managing tasks like deleting rows, or updating a row's data. Actions are rendered as children.

Clicking on an action button will automatically return that row's data so you can access IDs and values.

<Table data={ this.state.table }>
  <Actions>
    <IconButton image='delete' action={ this.delete }/>
    <IconButton image='pencil' action={ this.edit }/>
  </Actions>
</Table>

Dynamic Table Editing

If you need to update or delete a table row, you can import the following two helper components:

import { DeleteTableRow, UpdateTableRow } from 'components/lib';

DeleteTableRow(state.table.body, id);
UpdateTableRow(state.table.body, rowData, id);