https://github.com/mckervinc/react-fluid-table
A windowed React table built on top of react-virtual
https://github.com/mckervinc/react-fluid-table
components fluid react react-table react-window reactjs table virtualized virtualizedlist windowed
Last synced: 3 months ago
JSON representation
A windowed React table built on top of react-virtual
- Host: GitHub
- URL: https://github.com/mckervinc/react-fluid-table
- Owner: mckervinc
- License: mit
- Created: 2020-01-30T05:19:46.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2025-03-19T16:45:07.000Z (4 months ago)
- Last Synced: 2025-03-29T06:01:45.335Z (4 months ago)
- Topics: components, fluid, react, react-table, react-window, reactjs, table, virtualized, virtualizedlist, windowed
- Language: TypeScript
- Homepage: https://mckervinc.github.io/react-fluid-table/#/
- Size: 1.18 MB
- Stars: 46
- Watchers: 2
- Forks: 15
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# react-fluid-table
> A React table inspired by [@tanstack/react-virtual](https://github.com/TanStack/virtual)
[](https://www.npmjs.com/package/react-fluid-table) [](https://standardjs.com)
## Install
```bash
# using yarn
yarn add react-fluid-table
# using npm
npm i react-fluid-table
```
## Usage
```jsx
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 = () => ;
```
## Development
To get a development environment working, run the following:
**Installation**
```bash
$ yarn install
$ cd example
$ yarn install
```
**Usage**
```bash
# in one terminal window/tab
$ yarn start
# in a separate terminal window/tab
$ cd example
$ yarn dev
```
## License
MIT © [Mckervin Ceme <[email protected]>](https://github.com/mckervinc)
---
This application was created using [create-react-hook](https://github.com/hermanya/create-react-hook).
This application features some icons from [Font Awesome](https://fontawesome.com/license/free).