prisma-dt-mui

Next.js DataTable component library with Material-UI implementing prisma-dt specification.

Features

• ✅ Server-side pagination with metadata
• ✅ Advanced filtering with 12 operators (eq, neq, like, gt, gte, lt, lte, in, notIn, between, isNull, isNotNull)
• ✅ DateTime filtering with MUI Date Pickers (ISO 8601 format for Prisma)
• ✅ Global search across multiple fields with debouncing
• ✅ Sorting with relational support
• ✅ Relational filtering & sorting using dot notation
• ✅ Column selection control
• ✅ Custom toolbar content support
• ✅ Compact & striped table variants
• ✅ Material-UI integration
• ✅ Full TypeScript support

Installation

npm install prisma-dt-mui

Peer Dependencies:

npm install react react-dom @mui/material @mui/icons-material @emotion/react @emotion/styled

Required Dependencies (included):

• @mui/x-date-pickers - For datetime filtering
• dayjs - Date manipulation library

Quick Start

import { DataTable, ColumnDef, DataTableRequest } from "prisma-dt-mui";
import { useState, useCallback } from "react";

interface User {
  id: number;
  name: string;
  email: string;
  createdAt: string;
}

const columns: ColumnDef<User>[] = [
  { field: "id", headerName: "ID", sortable: true, filterable: true },
  {
    field: "name",
    headerName: "Name",
    sortable: true,
    filterable: true,
    searchable: true,
  },
  {
    field: "email",
    headerName: "Email",
    filterable: true,
    searchable: true,
  },
  {
    field: "createdAt",
    headerName: "Created At",
    type: "datetime",
    sortable: true,
    filterable: true,
  },
];

async function fetchUsers(request: DataTableRequest) {
  const response = await fetch("/api/users/dt", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(request),
  });
  return response.json();
}

function UsersTable() {
  const [data, setData] = useState<User[]>([]);
  const [meta, setMeta] = useState({
    current_page: 1,
    per_page: 10,
    from: 0,
    to: 0,
    total: 0,
    last_page: 1,
  });
  const [loading, setLoading] = useState(false);

  const handleRequestChange = useCallback(async (request: DataTableRequest) => {
    setLoading(true);
    try {
      const response = await fetchUsers(request);
      setData(response.data);
      setMeta(response.meta);
    } catch (error) {
      console.error(error);
    } finally {
      setLoading(false);
    }
  }, []);

  return (
    <DataTable
      columns={columns}
      data={data}
      meta={meta}
      loading={loading}
      onRequestChange={handleRequestChange}
      enableGlobalSearch
      enableColumnFilters
      enableSorting
      enablePagination
    />
  );
}

Column Types

The library supports various column types with specialized filtering:

const columns: ColumnDef[] = [
  // Text column with like/contains filtering
  { field: "name", headerName: "Name", type: "text", filterable: true },

  // Number column with comparison operators (gt, gte, lt, lte, between)
  { field: "salary", headerName: "Salary", type: "number", filterable: true },

  // Date column with date picker
  {
    field: "birthDate",
    headerName: "Birth Date",
    type: "date",
    filterable: true,
  },

  // DateTime column with date-time picker (24-hour format, ISO 8601)
  {
    field: "createdAt",
    headerName: "Created",
    type: "datetime",
    filterable: true,
  },

  // Select column with predefined options
  {
    field: "status",
    headerName: "Status",
    type: "select",
    filterable: true,
    filterOptions: [
      { label: "Active", value: "active" },
      { label: "Inactive", value: "inactive" },
    ],
  },
];

Filter Operators

Available operators per column type:

• Text: eq, neq, like, in, notIn, isNull, isNotNull
• Number: eq, neq, gt, gte, lt, lte, between, in, notIn, isNull, isNotNull
• Date/DateTime: eq, neq, gt, gte, lt, lte, between, isNull, isNotNull
• Select: eq, neq, in, notIn, isNull, isNotNull

DateTime filters automatically format values in ISO 8601 format for Prisma compatibility:

2024-11-19T14:30:00.000Z

Advanced Features

Relational Filtering & Sorting

Use dot notation to filter/sort on related fields:

const columns: ColumnDef[] = [
  {
    field: "department.name",
    headerName: "Department",
    sortable: true,
    filterable: true,
  },
  {
    field: "manager.fullName",
    headerName: "Manager",
    sortable: true,
  },
];

Custom Toolbar Content

Add custom buttons or components to the toolbar:

import { Button } from "@mui/material";

<DataTable
  {...props}
  toolbarContent={
    <>
      <Button variant="contained">Add New</Button>
      <Button variant="outlined">Export</Button>
    </>
  }
/>;

Compact & Striped Variants

// Compact table with striped rows
<DataTable {...props} size="small" variant="striped" />

Initial Request Configuration

<DataTable
  {...props}
  initialRequest={{
    page: 1,
    perPage: 25,
    sort: [{ column: "createdAt", direction: "desc" }],
    includeRelations: ["department", "manager"],
    selectColumns: ["id", "name", "email", "createdAt"],
  }}
/>

Custom Cell Rendering

const columns: ColumnDef[] = [
  {
    field: "salary",
    headerName: "Salary",
    type: "number",
    renderCell: ({ value }) =>
      new Intl.NumberFormat("id-ID", {
        style: "currency",
        currency: "IDR",
      }).format(value),
  },
  {
    field: "status",
    headerName: "Status",
    renderCell: ({ value, row }) => (
      <Chip label={value} color={value === "active" ? "success" : "default"} />
    ),
  },
];

DataTable Props

| Prop | Type | Default | Description | | --------------------- | ------------------------------------- | ------------ | ----------------------------- | | columns | ColumnDef[] | required | Column definitions | | data | T[] | required | Table data | | meta | PaginationMeta | required | Pagination metadata | | loading | boolean | false | Loading state | | onRequestChange | (request: DataTableRequest) => void | required | Request change handler | | initialRequest | DataTableRequest | - | Initial request configuration | | enableGlobalSearch | boolean | false | Enable global search | | enableColumnFilters | boolean | false | Enable column filters | | enableSorting | boolean | false | Enable sorting | | enablePagination | boolean | true | Enable pagination | | searchDebounceDelay | number | 500 | Search debounce delay (ms) | | toolbarContent | ReactNode | - | Custom toolbar content | | size | "small" \| "medium" | "medium" | Table size | | variant | "default" \| "striped" | "default" | Table variant | | hover | boolean | false | Enable row hover | | stickyHeader | boolean | false | Sticky table header | | maxHeight | number | - | Max table height (px) | | onRowClick | (row: T) => void | - | Row click handler | | emptyMessage | string | "No data" | Empty state message |

Backend Integration

This library works with any backend implementing the prisma-dt specification.

Request Format:

interface DataTableRequest {
  page: number;
  perPage: number;
  search?: string;
  filters?: FilterCondition[];
  sort?: SortCondition[];
  includeRelations?: string[];
  selectColumns?: string[];
}

Response Format:

interface DataTableResponse<T> {
  data: T[];
  meta: {
    current_page: number;
    per_page: number;
    from: number;
    to: number;
    total: number;
    last_page: number;
  };
}

License

MIT