bpk-component-datatable

Backpack datatable component.

Installation

npm install bpk-component-datatable --save-dev

Usage

import React from 'react';
import { BpkDataTable, BpkDataTableColumn } from 'bpk-component-datatable';

const rows = [
  { name: 'Jose', description: 'Software Engineer' },
  { name: 'Rolf', description: 'Manager' }
]

const onRowClick = row => alert(JSON.stringify(row));

export default () => (
  <BpkDataTable rows={rows} height={200} onRowClick={onRowClick}>
    <BpkDataTableColumn
      label={'Name'}
      dataKey={'name'}
      width={100}
    />
    <BpkDataTableColumn
      label={'Description'}
      dataKey={'description'}
      width={100}
      flexGrow={1}
    />
  </BpkDataTable>
);

By default BpkDataTable sorts the column using the value of dataKey. For use cases where the data might more complex and requires custom sorting you can pass a sort function along with sortBy and sortDirection and they will be handled as explained in react-virtualized's [docs] (https://github.com/bvaughn/react-virtualized/blob/main/docs/Table.md#prop-types)

import React from 'react';
import { BpkDataTable, BpkDataTableColumn } from 'bpk-component-datatable';
import _sortBy from 'lodash/sortBy';

const complexRows = [
    {
      name: 'Jose',
      description: 'Software Engineer',
      seat: { office: 'London', desk: 10 },
    },
    {
      name: 'Rolf',
      description: 'Manager',
      seat: { office: 'Barcelona', desk: 12 },
    },
    {
      name: 'John',
      description: 'Software Engineer',
      seat: { office: 'Barcelona', desk: 15 },
    },
];

let sortByValue = 'seat';
let sortDirectionValue = 'DESC';
const sortFunction = ({ sortBy, sortDirection }) => {
  if (sortBy === 'seat') {
    complexRows = _sortBy(complexRows, [
      row => row.seat.office,
      row => row.seat.desk,
    ]);
  } else {
    complexRows = _sortBy(complexRows, sortBy);
  }
  if (sortDirection === 'DESC') {
    complexRows.reverse();
  }
  sortByValue = sortBy;
  sortDirectionValue = sortDirection;
};

export default () => (
  <BpkDataTable
    rows={complexRows}
    height={200}
    sort={sortFunction}
    sortBy={sortByValue}
    sortDirection={sortDirectionValue}
  >
    <BpkDataTableColumn
      label="Name"
      dataKey="name"
      width={100}
    />
    <BpkDataTableColumn
      label="Description"
      dataKey="description"
      width={100}
    />
    <BpkDataTableColumn
      label="Seat"
      dataKey="seat"
      width={100}
      flexGrow={1}
      cellRenderer={({ cellData }) => (
        <React.Fragment>
          {cellData.office} - {cellData.desk}
        </React.Fragment>
      )}
    />
  </BpkDataTable>
);

Props

BpkDataTable

Supports all properties defined in Table (from react-virtualized), in addition to the following:

| Property | PropType | Required | Default Value | | ---------------------- | --------------------------- | -------- | -------------------- | | rows | arrayOf(Object) | true | - | | children | arrayOf(BpkDataTableColumn) | true | - | | height | number | true | - | | width | number | false | full width of parent | | headerHeight | number | false | 60 | | rowHeight | number | false | 60 | | defaultColumnSortIndex | number | false | 0 | | sort | func | false | null | | sortBy | string | false | null | | sortDirection | oneOf('ASC', 'DESC') | false | null |

BpkDataTableColumn

Supports all properties defined in Column (from react-virtualized)