@unriddle/react-grid v0.0.8

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.

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

CSS Classes

Build

npm run build