2.0.1 • Published 12 months ago
mobx-react-table-grid v2.0.1
@ixrock/mobx-react-table-grid
Easy to use and powerful table grid React-js component based on CSS-grid
Install | npm
npm install mobx-react-table-grid --save
Benefits
- easy-to-follow and simple API (just use as data input plain-objects and data-getters, mostly see
TableDataColumn
andTableDataRow
interfaces) - table rows virtualization (handle large amount of items, e.g. you can handle 10k pods from k8s, see the demo with generated 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 and resizing columns (powered by
react-dnd
) - filtering columns (show/hide/search)
- rows selection state management
- handling import/export state to external storage (e.g.
window.localStorage
, see:demo.tsx
) - customize column sizes via css-variables
--grid-col-size-${columnId}
(see usage indemo.module.css
) mobx
observability for grid state management under the hood
Demo
git checkout git@github.com:ixrock/mobx-react-table-grid.git
npm install
npm run dev
Example
import "mobx-react-table-grid/index.css"; // import styles (e.g. via webpack)
import React from "react"
import ReactDOM from "react-dom"
import { observable } from "mobx"
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<ResourceItem>({
dataItems: observable.box([
{
id: 1,
name: "Joe",
hobby: ["hacking", "martial-arts"],
renderName(){ return <b>Joel White</b> },
},
{
id: 2,
name: "Ann",
hobby: ["dancing"],
renderName(){ return <b>Anna Dark</b> },
}
]),
headingColumns: [
{
id: "index",
title: <b>#</b>,
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) => <b>{row.data.hobby.join(", ")}</b>,
sortValue: (row, col) => row.data.hobby.join(""),
searchValue: (row, col) => row.data.hobby.join(" "),
},
]
});
const Demo = observer(() => {
const { tableColumns, searchResultTableRows } = tableState;
return <Table
columns={tableColumns.get()}
rows={searchResultTableRows.get()}
/>
});
ReactDOM.render(<Demo/>, document.getElementById('app'));
1.2.0
12 months ago
1.1.1
12 months ago
1.3.5
12 months ago
1.3.4
12 months ago
1.3.2
12 months ago
1.3.1
12 months ago
1.2.2
12 months ago
1.3.0
12 months ago
1.2.1
12 months ago
1.1.2
12 months ago
2.0.1
12 months ago
2.0.0
12 months ago
1.1.0
1 year ago
1.0.11
1 year ago
1.0.10
1 year ago
1.0.9
1 year ago
1.0.8
1 year ago
1.0.7
1 year ago
1.0.6
1 year ago
1.0.5
1 year ago
1.0.4
1 year ago
1.0.3
1 year ago
1.0.2
1 year ago
1.0.1
1 year ago
1.0.0
1 year ago