Table

Are you familiar with the pain of marking up HTML tables? I don't think I'll ever forget it. Fortunately, you'll never have to mark up another table again.

Pass a JSON object to the <Table> component and let Gravity create the markup, filtering, sorting and searching.

Preview

Code

<Table
  search
  data={ users.data }
  loading={ users.loading }
  show={['name', 'email', 'status', 'permission']}
/>

Props

Prop	Description	Required	Value
actions	object with edit/delete/email or custom callback functions	optional	object (see below)
badge	object containing column name and color to highlight column values with a badge component	optional	object or object array (see below)
bulkActions	global actions array when using selectable prop	optional	array (see below)
data	table data	required	object (see below)
header	header names	optional	object (see below)
hide	columns (object key names) to hide	optional	array
loading	toggle loading spinner	optional	boolean
search	show the search box	optional	boolean
selectable	user can select table rows	optional	boolean
translation	reference to locale object for header translations	optional	string
show	columns (object key names) to show	optional	array
naked	remove the styling	optional	boolean
throttle	throttle the search callback function (milliseconds)	optional	integer

Table Header Object

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 first row table body data object and format them appropriately.

{
  header: [
    { name: 'name', title: 'Name', sort: true },
    { name: 'email', title: 'Email', sort: true },
    { name: 'plan', title: 'Billing Plan', sort: false }
  ],
}

Table Data Object

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 a column.

// without custom headers
const data = [
  { id: 1, name: 'Joseph Sandoval', email: '[e-mail]', plan: 'startup' },
  { id: 2, name: 'Alan Reed', email: '[e-mail]', plan: 'startup' },
  { id: 3, name: 'Maria Sanchez', email: '[e-mail]', plan: 'startup' },
]

// with custom headers
const data = {
  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: '[e-mail]', plan: 'startup' },
    { id: 2, name: 'Alan Reed', email: '[e-mail]', plan: 'startup' },
    { id: 3, name: 'Maria Sanchez', email: '[e-mail]', plan: 'startup' },
  ]
}

Table Actions

You can add global actions to all table rows by passing an action object with callback functions. There are some preset actions included for viewing detail pages or downloading files.

Clicking on an action button will automatically return the data of the row it belongs to so you can access IDs and values.

<Table
  data={ tableData }
  actions={{ 
  
    edit: editUser, 
    delete: deleteUser, 
    download: 'download_url', // download a file
    email: true, // show a button to email
    view: { url: `/events/${id}`, col: 'id' } // will load this url + /id  
  
  }}
/>

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 together.

<Table 
  selectable
  data={ apiKeys } 
  bulkActions={{
  
    delete: deleteKey,
    custom: [
      { text: 'Revoke', color: 'orange', action: revokeKey
    ]
  }}
/>

Bulk delete is supported by default, and you can add your own custom bulk actions using the custom array.

There is a full working example on the API keys list view where you can select and delete multiple keys simultaneously.

Individual Row Actions

You can also add unique actions to each row by attaching an actions object to that row in your data object. Row actions overwrite global actions.

Edit and Delete Rows

Both the edit and delete actions will pass a callback to your function that you can then use to live edit 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, pass an array of conditions and the table cell will test them. If you need multiple badges, you can pass an array of these objects.

badge={{ col: 'status', color: 'blue', condition: [

  { value: 'registered', color: 'green' },
  { value: 'invited', color: 'blue' }

]}}