Prop	Type	Description
`cellDataKey`	`str`	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, ...}`

NOTE: all other blueprintjs props are passed to the 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>
    );
  }
}

You will need grab the styles via your index.html file (or bundle them). Make sure the path to styles is correct.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Your Title</title>
    <link href="relative path to/node_modules/normalize.css/normalize.css" rel="stylesheet" />
    <link href="relative path to/node_modules/@blueprintjs/core/dist/blueprint.css" rel="stylesheet" />
    <link href="relative path to/node_modules/@blueprintjs/table/dist/table.css" rel="stylesheet" />
  </head>
  <body>
    <div id="root" class="container"></div>
    <script src="http://localhost:8080/build/bundle.js" charset="utf-8"></script>
  </body>
</html>

Additional docs

Read up on the API for the blueprintjs table component.

FAQs

What is sussol-react-table?

Is sussol-react-table popular?

Is sussol-react-table well maintained?

Package last updated on 03 Nov 2017

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install