https://github.com/ixrock/mobx-react-table-grid
Easy to use react.js table-component powered by native CSS grid
https://github.com/ixrock/mobx-react-table-grid
css-grid data-visualization grid-layout mobx react-components reactjs table-grid tableview
Last synced: 2 months ago
JSON representation
Easy to use react.js table-component powered by native CSS grid
- Host: GitHub
- URL: https://github.com/ixrock/mobx-react-table-grid
- Owner: ixrock
- License: mit
- Created: 2023-04-26T09:10:29.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-11-28T15:23:02.000Z (over 1 year ago)
- Last Synced: 2025-10-10T10:41:27.652Z (6 months ago)
- Topics: css-grid, data-visualization, grid-layout, mobx, react-components, reactjs, table-grid, tableview
- Language: TypeScript
- Homepage: https://mobx-react-table-grid.vercel.app
- Size: 1.26 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Powerful, simple, fast and API-friendly CSS-grid component (based on React/MobX)
----
## Install | [npm](https://www.npmjs.com/package/mobx-react-table-grid)
```
npm install mobx-react-table-grid
```
## Benefits
- simple API _(just use as data input plain-objects and data-getters, mostly see `TableDataColumn` and `TableDataRow` interfaces)_
- table rows virtualization _(you can easily handle 50k+ items (e.g. k8s resources) without slowness in UI while having access to data)_
- most of the layout done via `display: grid` with some help of css-variables _(works really fast!)_
- multi-columns sorting _(powered by `lodash/orderBy`)_
- reordering columns: drag the heading column _(powered by `react-dnd`)_
- filtering columns _(show/hide/search)_
- resizing columns + reset to default (css-grid min-content)
- lightweight rows search implementation (see `demo.tsx`)
- rows/data selection state management (see `demo.tsx`)
- import/export grid-state to external storage (e.g. `window.localStorage`, see `demo.tsx`)
- customize column sizes via css-variables `--grid-col-size-${columnId}` _(see usage in `demo.module.css`)_
- `mobx` observability for grid state management under the hood
## Demo
```
git clone https://github.com/ixrock/mobx-react-table-grid.git
npm install
npm run dev
```
## Example
```tsx
import "mobx-react-table-grid/index.css"; // or @import in *.css
import React from "react"
import { createRoot } from "react-dom/client" // react@18+
import { observer } from "mobx-react"
import { createTableState, Table } from "mobx-react-table-grid";
interface ResourceItem {
id: string | number;
name: string;
hobby: string[];
renderName(): React.ReactNode;
};
const tableState = createTableState({
items: [
{
id: 1,
name: "Joe",
hobby: ["hacking", "martial-arts"],
renderName(){ return Joel White },
},
{
id: 2,
name: "Ann",
hobby: ["dancing"],
renderName(){ return Anna Dark },
}
],
columns: [
{
id: "index",
title: #,
renderValue: (row, col) => row.index,
},
{
id: ResourceColumnId.name,
title: <>Name>,
renderValue: (row, col) => row.data.renderName(),
sortValue: (row, col) => row.data.name,
},
{
id: ResourceColumnId.hobby,
title: <>Hobby>,
renderValue: (row, col) => {row.data.hobby.join(", ")},
sortValue: (row, col) => row.data.hobby.join(""),
searchValue: (row, col) => row.data.hobby.join(" "),
},
]
});
const Demo = observer(() => {
const { tableColumns, searchResultTableRows } = tableState;
return (
);
});
// react@18+
const appRootElem = document.getElementById("app");
createRoot(appRootElem).render();
```