siathalysedI / react-css-grid-table

A React table library using CSS Grid Layout

react-css-grid-table

This is a React table library using CSS grid. I refactored it as a standalone component from a blog API project I've been working on. You can see an example of it being used in that app here.

It depends on SCSS support so you'll need to have that configured.

Installation

yarn add https://github.com/RebeccaPark/react-css-grid-table

Example

import Table, { IconColumn } from 'react-css-grid-table';

const headers = [
  {
    label: 'Title',
    value: 'title',
    width: '1fr',
  },
  {
    value: 'likes',
    width: '0.5fr',
  },
];

const data = [
  {
    title: 'This is the first post',
    likes: 3,
  },
  {
    title: 'This is the second post',
    likes: 2,
  },
];

const customColumns = {
  likes: {
   format: (data) => <IconColumn icon="iconClassNameHere" data={data} />,
   className: 'anyAdditionalClassName',
  },
};

<Table
  headers={headers}
  data={data}
  customColumns={customColumns}
/>