Skip to content

mckervinc/react-fluid-table

Repository files navigation

react-fluid-table

A React table inspired by @tanstack/react-virtual

NPM JavaScript Style Guide

Install

# using yarn
yarn add react-fluid-table

# using npm
npm i react-fluid-table

Usage

import "react-fluid-table/dist/index.css"; // this only needs to be imported once
import { Table } from "react-fluid-table";

const data = _.range(100).map(i => ({
  id: i + 1,
  firstName: randFirstName(),
  lastName: randLastName(),
  email: randEmail()
}));

const columns = [
  {
    key: "firstName",
    header: "First Name",
    width: 100
  },
  {
    key: "lastName",
    header: "Last Name",
    width: 100
  },
  {
    key: "email",
    header: "Email"
  }
];

const Example = () => <Table data={data} columns={columns} />;

Development

To get a development environment working, run the following:

Installation

$ yarn install
$ cd example
$ yarn install

Usage

# in one terminal window/tab
$ yarn start
# in a separate terminal window/tab
$ cd example
$ yarn dev

License

MIT © Mckervin Ceme <[email protected]>


This application was created using create-react-hook.

This application features some icons from Font Awesome.