table

The Table component is used to display data in a html table. It relies on the headless library react-table to handle more complex features.

Import

import { Table } from '@xpanseinc/nebula'

Basic Usage

<Table
  data={data}
  columns={columns}
  density="compact"
  borderType="horizontal"
/>

const columns = [
  { accessor: 'id', Header: 'ID' },
  { accessor: 'firstName', Header: 'First Name' },
  { accessor: 'lastName', Header: 'Last Name' },
  { accessor: 'age', Header: 'Age' },
  { accessor: 'address.state', Header: 'State' },
]

const data = [
  {
    id: 1,
    lastName: 'Snow',
    firstName: 'Jon',
    age: 35,
    address: {
      street: 'Main St',
      nummber: '123',
      state: 'California',
      zipcode: '90217',
    },
  },
  ...restOfData,
]

Expandable Rows

<Table
  data={data}
  columns={columns}
  density="standard"
  borderType="outer"
  rowSpacing={4}
  renderExpandableRow={(props) => <ExpandedComponent {...props} />}
/>

const ExpandedComponent = ({ firstName, lastName, age, address }) => (
  <div
    style={{
      width: '100%',
      display: 'flex',
      justifyContent: 'space-between',
      padding: '0.5rem 1rem',
    }}
  >
    <div style={{ fontWeight: '700' }}>{firstName}</div>
    <div style={{ fontWeight: '700' }}>{address.number}</div>
    <div style={{ fontWeight: '700' }}>{address.street}</div>
    <div style={{ fontWeight: '700' }}>{address.state}</div>
    <div style={{ fontWeight: '700' }}>{address.zipcode}</div>
  </div>
)