mantine-entity
Version:
A library combining Mantine, TanStack Query, and Mantine React Table for efficient entity management
88 lines (87 loc) • 4.11 kB
JavaScript
/* eslint-disable @typescript-eslint/no-explicit-any */
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { MantineReactTable, } from "mantine-react-table";
import { useMemo, useState } from "react";
import { useLocalStorage } from "@mantine/hooks";
import { Flex, Text } from "@mantine/core";
import { IconTable } from "@tabler/icons-react";
import { getDefaultMRTOptions } from "./defaultMRTOptions";
const TableWithCollectionQuery = (props) => {
const { defaultWhere, data, columns, isLoading, rowCount, setCollectionQuery, } = props;
const defaultMRTOptions = getDefaultMRTOptions(); //get your default options
const memoDefaultWhere = useMemo(() => [...(defaultWhere ? defaultWhere[0] : [])], [defaultWhere]);
const [sorting, setSorting] = useState([]);
const [columnFilters, setColumnFilters] = useState([]);
const [paginationState, setPagination] = useState({
pageIndex: 0,
pageSize: 20,
});
const [density, onDensityChange] = useLocalStorage({
key: "table-density",
defaultValue: "md",
});
const memoColumns = useMemo(() => [
{
accessorKey: "itemNumber",
header: "No",
Cell: ({ row }) => row.index + 1,
size: 100,
},
...columns,
], [columns]);
const memoData = useMemo(() => data, [data]);
return (_jsx(MantineReactTable, { ...defaultMRTOptions, state: {
isLoading,
pagination: paginationState,
columnFilters,
sorting,
density,
}, data: memoData, columns: memoColumns, rowCount: rowCount ?? 0, manualFiltering: true, manualSorting: true, manualPagination: true, onColumnFiltersChange: (updater) => {
const newState = typeof updater === "function" ? updater(columnFilters) : updater;
setColumnFilters(newState);
if (newState.length > 0) {
console.log({ newState });
setCollectionQuery((prev) => ({
...prev,
where: [
[
...memoDefaultWhere,
...(newState?.map(({ id, value }) => ({
column: id,
value,
operator: "ILIKE",
})) ?? []),
],
],
}));
}
}, onSortingChange: (updater) => {
const newState = typeof updater === "function" ? updater(sorting) : updater;
setSorting(newState);
setCollectionQuery((prev) => ({
...prev,
orderBy: [
...(newState?.map(({ id, desc }) => ({
column: id,
direction: desc ? "DESC" : "ASC",
})) ?? [{ column: "createdAt", direction: "ASC" }]),
],
}));
}, onPaginationChange: (updater) => {
const newState = typeof updater === "function" ? updater(paginationState) : updater;
setPagination(newState);
setCollectionQuery((prev) => ({
...prev,
sk: newState.pageSize * newState.pageIndex,
t: newState.pageSize,
}));
}, renderEmptyRowsFallback: () => (_jsx("div", { className: "w-full h-[260px] flex items-center justify-center", children: _jsxs(Flex, { className: "flex items-center justify-center flex-col gap-2", color: "dimmed", children: [_jsx(IconTable, {}), _jsx(Text, { color: "dimmed", children: "No Data Found" })] }) })), onDensityChange: onDensityChange, mantinePaperProps: {
style: { "--mrt-base-background-color": "var(--card)" },
shadow: "none",
}, mantinePaginationProps: {
rowsPerPageOptions: ["5", "10", "20", "50", "100", "200"],
withEdges: false, //note: changed from `showFirstLastButtons` in v1.0
} }));
};
export default TableWithCollectionQuery;