How to use

import { Table } from "library-name";
import { colDef, data } from "./somewhere";

const App = () => <Table colDef={colDef} list={data} />;

Step by step

With this data below we want to have a table with id, name and age.

Data:

[
  {
    id: "1",
    name: "Steve",
    age: "29"
  },
  {
    id: "2",
    name: "Roger",
    age: "33"
  },
  {
    id: "3",
    name: "Sarah",
    age: "27"
  }
];

For this to work we will have to create a column definition.

Column Definition defines how we want to map the respective values from the data:

const columnDefinition = [
  {
    key: "id",
    label: "Id",
    size: 50
  },
  {
    key: "name",
    label: "User Name",
    size: 150
  },
  {
    key: "age",
    label: "User Age",
    size: 50
  }
];

As we can see from above it has three important characteristics: key, size and label.

| key | Description | required? | | --------- | --------------------------------------------------------------- | --------- | | key | What key we want to map with from the data. | YES | | size | the size of the column | YES | | label | The label in the header that will be shown for the mapped value | NO | | checkbox | if we want to render checkboxes for a column | NO | | component | to render a custom component with the data | NO |

Checkbox column and a custom component:

export const customColDef = [
  {
    key: "checkbox",
    size: 50
  },
  {
    label: "Hotel",
    key: "hotel",
    size: 250,
    component: ({ rowData }) => {
      return <a href={rowData.link}>{rowData.hotel}</a>;
    }
  }
];

Props

| key | Description | default | | ------------------ | ---------------------------------------------------------------- | ------------------- | | list | Your data. | | | colDef | Defines how to map the values into the grid | | | fixedRowCount | number | | | fixedColumnCount | number | | | fixedHeight | number | | | fixedWidth | number | | | rowHeight | number | | | headerHeight | number | | | isBoxShadow | boolean, | true | | hoverOnX | boolean | false | | hoverOnY | boolean | false | | isZebra | boolean | false | | isSortOn | boolean | false | | isEditable | boolean | false | | onCellChange | function callback with changed cell (only when using isEditable) | | | onLabelClick | function callback with clicked label info | | | footer | function | example: lib/footer |

CSS Classes

| key | Description | | --------------------------------- | ------------------------------------------------------------------------------------------------------------------- | | Table | has to be set on style prop | | Row | .table--row-even .table--row-odd | | th | .c-table--th | | td | .c-table--td | | th when sorting (when active) | .c-table--th-sort .c-table--th-sort-active | | sort icon button (when active) | .c-sort-button .c-sort-button--active | | hover cell (when active) | .c-table--td-hover-cell | | Fixed rows styles (when active) | .c-table--top-left-grid .c-table--top-right-grid .c-table--bottom-left-grid .c-table--bottom-right-grid | | editable cell input (when active) | .c-editable-cell--input | | sub header (when active) | .c-table--sub-header .c-table--sub-header-title | | Checkbox (when active) | .c-checkbox-cell .c-checkbox-cell--input id="c-checkbox-label-checkboxKey for="c-checkbox-label-checkboxKey |

Build

npm run build