Table usage

Overview

Concrete has a table UI implementation based on react-table hooks. So be sure to understand how react-table hooks work before doing anything.

Installation

Concrete table needs other dependencies to work. So first run

  npm i @habx/ui-table react-table

Basic usage

Concrete Table exports an abstraction of useTable hook and a component to render the ui of the table.

Here is how it works.

import { useTable, Table } from "@habx/ui-table";

export const data = [
  { name: "Jon", age: 19 },
  { name: "Eddy", age: 30 },
  { name: "Michel", age: 40 },
];

export const columns = [
  {
    Header: "Name",
    accessor: "name",
  },
  {
    Header: "Age",
    accessor: "age",
  },
];

export const TableExample = () => {
  const tableInstance = useTable({
    data, // should be memoized
    columns, // should be memoized
  });
  return <Table instance={tableInstance} />;
};

Example

Name	Age
Jon	19
Eddy	30
Michel	40