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

PropDescriptionRequiredValue

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)

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 Data 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 table body and format them appropriately.

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

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

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

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

]}}

Last updated