Rath Components

React wrappers around @mui/x-data-grid-premium that ship sensible defaults for fetching, pagination, sorting, filtering, and toolbar wiring. Works in client-side React 18+ apps and Next.js 13+ server components.

Installation

Install the package alongside MUI and Emotion:

npm install @tranz-rath/components @mui/material @mui/x-data-grid-premium @emotion/react @emotion/styled

Peer dependencies: react, react-dom, and (optionally) next when using the server grid in Next.js.

ClientDataGrid

Client-side grid that can render provided rows or fetch them on mount.

import { ClientDataGrid } from "@tranz-rath/components";

const columns = [
  { field: "id", headerName: "ID", width: 80 },
  { field: "name", headerName: "Name", flex: 1 },
];

export default function UsersGrid() {
  return (
    <ClientDataGrid
      apiUrl="/api/users"          // omit to use the `rows` prop instead
      dataPath="data.items"        // where rows live in the JSON (default: "data")
      columns={columns}            // optional; inferred from the first row if missing
      pageSizeOptions={[10, 25, 50]}
      showToolbar                  // enables quick filter + toolbar
      onFetchSuccess={(rows, payload) => console.log(rows.length)}
    />
  );
}

Key props:

• apiUrl: When set (and rows is undefined) the grid fetches JSON on mount.
• requestInit: Extra fetch options (headers, method, etc.).
• dataPath: Dot path inside the JSON to locate the rows; falls back to common keys (data, rows, items, results).
• transformResponse(payload): Custom mapper that must return an array of rows.
• getRowId: Provide if rows do not include id; otherwise indexes are used.
• slots / slotProps: Passed directly to DataGridPremium; toolbar shows quick filter by default.

ServerDataGrid

Server-mode grid that streams rows through the MUI dataSource API and can sync URL query params for deep-linkable states.

import { ServerDataGrid } from "@tranz-rath/components";

const columns = [
  { field: "name", headerName: "Name", flex: 1 },
  { field: "role", headerName: "Role", flex: 1 },
];

export default function UsersGrid() {
  return (
    <ServerDataGrid
      apiUrl="/api/users"
      columns={columns}
      rowCountPath="meta.total"          // where total count lives (optional)
      dataPath="data"                    // where rows live (default: "data")
      pageSizeOptions={[10, 25, 50, 100]}
      syncQueryParams                    // keep page/sort/filter in the URL (default: true)
      buildQueryParams={(params) => {
        // params = { paginationModel, sortModel, filterModel, start, end }
        return {
          start: params.start,
          end: params.end,
          sortColumn: params.sortModel?.[0]?.field,
          sortDirection: params.sortModel?.[0]?.sort,
          search: params.filterModel?.quickFilterValues?.join(" "),
        };
      }}
    />
  );
}

Default query behavior (when buildQueryParams is not provided):

• Pagination: page and pageSize (0-based page index).
• Sorting: sortColumn + sortDirection (asc/desc).
• Filtering: single filterColumn, filterOperator, filterValue per filter item.
• Quick filter: search.

Response handling:

• Rows are read from dataPath (defaults to data), or from data, rows, items, or results.
• Total row count is read from rowCountPath, or from rowCount, total, totalCount, count, or pagination.total.
• Override with transformResponse(payload, params) returning { rows, rowCount? }.

URL synchronization:

• Controlled by syncQueryParams (default true); captures page, pageSize, sortField, sortDir, filters (JSON), and search.
• Controlled models (paginationModel, sortModel, filterModel) are respected and still update the URL unless syncQueryParams is false.

Styling:

• sx merges with a default bordered layout.
• slots / slotProps are passed through; toolbar quick filter is enabled by default.

Local development

The package ships compiled ESM; no build step is required here. To test locally in an app:

1. Run npm pack in this repo.
2. In your app, install the tarball (npm install ../rath-components-*.tgz) and import the components.