sussol-react-table

A wrapper and simple API for using the blueprintjs data table

Installation

yarn add sussol-react-table

or

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.
• loadingRowCount, if using sussol-react-table@next, will most likely need to be styled (e.g. add background-color) by extending the .pt-table-container .pt-loading .pt-skeleton { ... } selector.

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)

Testing locally via another project

1. From inside sussol-react-table run yarn build
2. From your project run yarn add file:path/to/sussol-react-table
3. Run your project

Additional docs

Read up on the API for the blueprintjs table component.