mantine-entity
Version:
A library combining Mantine, TanStack Query, and Mantine React Table for efficient entity management
66 lines (65 loc) • 3.61 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo, useState } from "react";
import { Group, Stack } from "@mantine/core";
import { DeleteButton, UpdateButton, ViewButton } from "./action-button";
import { useListQuery } from "./querys";
import { decodeCollectionQuery } from "../../utils/collection-query-builder";
import Filters from "../../components/filters";
import TableWithCollectionQuery from "../../components/table-with-collection-query";
const RenderTable = ({ feat, columns, filters, queryBuilder, accessorKey = "id", rootConfig, q, currentPermissions, LinkComponent, renderCustomActions, requestParams, appMainPath, }) => {
const cQuery = q
? decodeCollectionQuery(q)
: {};
const [collectionQuery, setCollectionQuery] = useState(q ? cQuery : queryBuilder?.list?.collectionQuery ?? {});
const { data: list, isLoading, isFetching, } = useListQuery({
collectionQuery: {
sk: 0,
t: 20,
orderBy: [{ column: "createdAt", direction: "DESC" }],
...collectionQuery,
},
actionQuery: queryBuilder?.list,
rootConfig,
requestParams,
});
const memoFilters = useMemo(() => filters ?? [], [filters]);
const memoColumns = useMemo(() => columns ?? [], [columns]);
const memoActionColumn = useMemo(() => [
{
accessorKey: accessorKey ?? "id",
header: "Actions",
Cell: (data) => (_jsxs(Group, { gap: 5, children: [queryBuilder?.view && (_jsx(ViewButton, { appMainPath: appMainPath, id: data.row.original[accessorKey], path: feat, currentPermissions: currentPermissions, LinkComponent: LinkComponent })), queryBuilder?.update && (_jsx(UpdateButton, { appMainPath: appMainPath, id: data.row.original[accessorKey], path: feat, currentPermissions: currentPermissions, LinkComponent: LinkComponent })), queryBuilder?.delete && (_jsx(DeleteButton, { actionQuery: queryBuilder?.delete, data: data?.row?.original, rootConfig: rootConfig, currentPermissions: currentPermissions, requestParams: requestParams })), renderCustomActions && renderCustomActions(data?.row?.original)] })),
},
], [accessorKey, feat, queryBuilder, rootConfig, renderCustomActions]);
const isActionColumnVisible = useMemo(() => queryBuilder?.view ||
queryBuilder?.update ||
queryBuilder?.delete ||
renderCustomActions, [queryBuilder]);
const handleClearFilters = () => {
setCollectionQuery((prev) => ({
...prev,
where: [],
sk: 0,
}));
};
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const handleApplyFilters = (filters) => {
console.log({ filters });
const whereConditions = filters?.map(({ column, operator, value }) => ({
column,
operator,
value,
}));
setCollectionQuery((prev) => ({
...prev,
where: [whereConditions],
sk: 0,
}));
};
return (_jsxs(Stack, { children: [_jsx(Group, { justify: "end", children: memoFilters.length > 0 && (_jsx(Filters, { columns: memoFilters, onApply: handleApplyFilters, onClear: handleClearFilters })) }), _jsx(TableWithCollectionQuery, { data: list ? list?.items : [], columns: [
...memoColumns,
...(isActionColumnVisible ? memoActionColumn : []),
], rowCount: list?.total ?? 0, setCollectionQuery: setCollectionQuery, isLoading: isLoading ?? isFetching })] }));
};
export default RenderTable;