Next.js DataTable component library with MUI implementing prisma-dt specification
npm install prisma-dt-muibash
npm install prisma-dt-mui
`
Peer Dependencies:
`bash
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
`typescript
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[] = [
{ 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([]);
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 (
data={data}
meta={meta}
loading={loading}
onRequestChange={handleRequestChange}
enableGlobalSearch
enableColumnFilters
enableSorting
enablePagination
/>
);
}
`
Column Types
The library supports various column types with specialized filtering:
`typescript
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
$3
Use dot notation to filter/sort on related fields:
`typescript
const columns: ColumnDef[] = [
{
field: "department.name",
headerName: "Department",
sortable: true,
filterable: true,
},
{
field: "manager.fullName",
headerName: "Manager",
sortable: true,
},
];
`
$3
Add custom buttons or components to the toolbar:
`typescript
import { Button } from "@mui/material";
toolbarContent={
<>
}
/>;
`
$3
`typescript
// Compact table with striped rows
`
$3
`typescript
initialRequest={{
page: 1,
perPage: 25,
sort: [{ column: "createdAt", direction: "desc" }],
includeRelations: ["department", "manager"],
selectColumns: ["id", "name", "email", "createdAt"],
}}
/>
`
$3
`typescript
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 }) => (
),
},
];
`
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:
`typescript
interface DataTableRequest {
page: number;
perPage: number;
search?: string;
filters?: FilterCondition[];
sort?: SortCondition[];
includeRelations?: string[];
selectColumns?: string[];
}
`
Response Format:
`typescript
interface DataTableResponse {
data: T[];
meta: {
current_page: number;
per_page: number;
from: number;
to: number;
total: number;
last_page: number;
};
}
``