mobx-react-table-grid
TypeScript icon, indicating that this package has built-in type declarations

2.3.0 • Public • Published

Powerful, simple, fast and API-friendly CSS-grid component (based on React/MobX)

Install | npm

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

Screenshot

Example

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<ResourceItem>({
  items: [
    {
      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> },
    }
  ],
  columns: [
    {
      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
      id="table-grid-demo"
      columns={tableColumns.get()}
      rows={searchResultTableRows.get()}
    />
  );
});

// react@18+
const appRootElem = document.getElementById("app");
createRoot(appRootElem).render(<Demo/>);

Versions

Current Tags

VersionDownloads (Last 7 Days)Tag
2.3.05latest

Version History

VersionDownloads (Last 7 Days)Published
2.3.05
2.2.01
2.1.02
2.0.10
2.0.01
1.3.51
1.3.41
1.3.21
1.3.11
1.3.01
1.2.20
1.2.11
1.2.00
1.1.20
1.1.10
1.1.00
1.0.110
1.0.100
1.0.90
1.0.81
1.0.70
1.0.60
1.0.50
1.0.40
1.0.30
1.0.21
1.0.10
1.0.00

Package Sidebar

Install

npm i mobx-react-table-grid

Weekly Downloads

17

Version

2.3.0

License

MIT

Unpacked Size

57 kB

Total Files

13

Last publish

Collaborators

  • ixrock