Sussol-react-table NPM

sussol-react-table

A wrapper and simple API for using the blueprintjs data table

Installation

yarn add sussol-react-table

npm install sussol-react-table

Added Options

Prop	Type	Description
`cellAutoHeight`	`Object \\| Boolean`	Defaults to `false`. If `true`, or an object of options is provided, the table will adjust the `<Cell />` height to fit the length of the content. Use with `wrapText: true` inside `coreCellProps` for best results with no truncation.
`cellDataKey`	`String`	Pass a key (object property) from your table data set as a string. The data's key will be used to access a value – the unique key. Good for selecting the table row and loading a corresponding component, based on the selected key. e.g. `{ ... code: 123456789, ...}`
`columns`	`Array`	`[{ key: String, title: String, ?sortable: Boolean, ?align: "left\\|center\\|right" }]` Column headers for the table.
`coreCellProps`	`Object`	Pass any core Blueprint `<Table />` props through.
`tableData`	`Array`	`[{ any }]` Must contain at least the valid `columns` keys.
`defaultColumnAlign`	`String`	`"left\\|center\\|right"` The CSS text alignment for all table cells. Defaults to `"left"`. A column's `align` key takes precedence.
`defaultSortKey`	`String`	The default column key for sorting the table data. If no key is set, nothing is done. Be sure your data already exists when the component initialises (i.e. `{this.state.data.length && ...`).
`defaultSortOrder`	`String`	`"asc\\|desc"` If `defaultSortKey` is set, determines the default column sort direction on initialisation. Defaults to `"asc"`.
`coreEditableCellProps`	`Object`	An object of Blueprint `<EditableCell />` props to pass through. All handler functions will be passed `value: String, row: Number, { column:Number, columnKey:String }:Object`, which differs slightly from the default implementation options.
`loadingRowCount`	`Number`	If set, table will show the core loading state for rows/cells equal to the value of `loadingRowCount`. Defaults to `0`.

NOTE:

All other blueprintjs Table props are passed to its root <Table /> component.

Usage

import React from 'react';
import { SussolReactTable } from 'sussol-react-table';

const columns = [
  {
    key: 'name',
    title: 'Name',
    sortable: true,
  },
  {
    key: 'code',
    title: 'Code',
    sortable: true,
  },
  {
    key: 'group',
    title: 'Editable Column',
    editable: true,
  },
];

const data = [];
for (let i = 0; i < 100; i++) {
  data.push({ code: `code${i}`, name: `name${i}`, group: `group${i % 2}` });
}

export class App extends React.Component {
  render() {
    return (
      <div style={{ height: 400 }}>
        <h1>A Beautiful table</h1>
        <SussolReactTable
          columns={columns}
          tableData={data}
          cellDataKey="code"
        />
      </div>
    );
  }
}

Required style dependencies

You will need include the following styles via your index.html (or by bundling them). Make sure the path to styles is correct.

path/to/node_modules/@blueprintjs/core/dist/blueprint.css
path/to/node_modules/@blueprintjs/table/dist/table.css
path/to/node_modules/normalize.css/normalize.css (good for resetting to safe, base styles for most all browsers)