Powered by:

• TanStack Table
• Material UI

Getting Started

Install with your favorite package manager

npm add @zmrl/material-grid

# or...

yarn add @zmrl/material-grid

# or...

pnpm add @zmrl/material-grid

If you've used @tanstack/react-table before, the setup is almost identical. You need to setup ColumnDefs to map your data in the table. This package re-exports a columnHelper factory from @tanstack/react-table, called createColumnHelper. You can use the helper to setup your ColumnDefs or provide an array of your own.

// columns.ts

import { createColumnHelper } from "@zmrl/material-grid"

interface Person {
  id: number;
  firstName: string;
  lastName: string;
  age: number;
  bio: string;
  createdOn: Date; 
  modifiedOn: Date;
}

const columnHelper = createColumnHelper<Person>()

export const columns = [
  columnHelper.accessor("id", { header: "#", size: 100 }),
  columnHelper.accessor("firstName", { header: "First Name", size: 100 }),
  columnHelper.accessor("lastName", { header: "Last Name", size: 100 }),
  columnHelper.accessor("age", { header: "Age", size: 65 }),
  columnHelper.accessor("bio", { header: "Bio", size: 800 }),
  columnHelper.accessor("createdOn", {
    header: "Created On",
    cell: (props) => props.getValue().toLocaleDateString(),
    size: 100,
  }),
  columnHelper.accessor("modifiedOn", {
    header: "Modified On",
    cell: (props) => props.getValue().toLocaleDateString(),
    size: 100,
  }),
];

Pass these columns and your data to the MaterialGrid component and all your data will be rendered as rows per your column definitions.

// App.tsx

import { MaterialGrid } from "@zmrl/material-grid"
import { columns } from "./columns"

const data: Person[] = [ 
/** 
 * rows 
 * and 
 * rows
 * of 
 * data 
 */
]

function App() {
  return (
    <MaterialGrid data={data} columns={columns} />
  )
}

Demo

There is a demo of this project found at ./demo.

1. Clone this repo - git clone https://github.com/zmrl010/material-grid.git
2. Install dependencies - pnpm install
3. Run the dev server - pnpm dev