bpk-component-datatable

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>
);

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

BpkDataTableColumn

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