mantine-entity
Version:
A library combining Mantine, TanStack Query, and Mantine React Table for efficient entity management
47 lines (46 loc) • 3.49 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { MRT_ShowHideColumnsButton, MRT_ToggleDensePaddingButton, MRT_ToggleFullScreenButton, MRT_ToggleGlobalFilterButton, } from "mantine-react-table";
import { IconBaselineDensityLarge, IconBaselineDensityMedium, IconBaselineDensitySmall, IconColumns, IconFilter, IconFilterOff, IconMaximize, IconMinimize, IconSearch, IconSearchOff, } from "@tabler/icons-react";
import { Flex, Text } from "@mantine/core";
export const IconEmptyData = () => {
return (_jsx("div", { children: _jsx("svg", { width: "64", height: "41", viewBox: "0 0 64 41", xmlns: "http://www.w3.org/2000/svg", children: _jsxs("g", { transform: "translate(0 1)", fill: "none", fillRule: "evenodd", children: [_jsx("ellipse", { fill: "#f5f5f5", cx: "32", cy: "33", rx: "32", ry: "7" }), _jsxs("g", { fillRule: "nonzero", stroke: "#d9d9d9", children: [_jsx("path", { d: "M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z" }), _jsx("path", { d: "M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z", fill: "#fafafa" })] })] }) }) }));
};
//define re-useable default table options for all tables in your app
export const iconProps = {
size: 18,
};
export const actionIconStyles = {
"--ai-size": "var(--ai-size-lg)",
"--ai-hover": "var(--mantine-color-gray-light-hover)",
"--ai-color": "var(--mantine-color-gray-light-color)",
"--ai-bd": "calc(0.0625rem * var(--mantine-scale)) solid transparent",
};
const icons = {
IconSearch: () => _jsx(IconSearch, { ...iconProps }),
IconSearchOff: () => _jsx(IconSearchOff, { ...iconProps }),
IconFilter: () => _jsx(IconFilter, { ...iconProps }),
IconFilterOff: () => _jsx(IconFilterOff, { ...iconProps }),
IconColumns: () => _jsx(IconColumns, { ...iconProps }),
IconBaselineDensityLarge: () => _jsx(IconBaselineDensityLarge, { ...iconProps }),
IconBaselineDensityMedium: () => _jsx(IconBaselineDensityMedium, { ...iconProps }),
IconBaselineDensitySmall: () => _jsx(IconBaselineDensitySmall, { ...iconProps }),
IconMaximize: () => _jsx(IconMaximize, { ...iconProps }),
IconMinimize: () => _jsx(IconMinimize, { ...iconProps }),
};
export const getDefaultMRTOptions = () => ({
//list all of your default table options here
enableColumnPinning: true,
initialState: {
density: "xs",
columnPinning: {
right: ["action"], //pin built-in row actions display column to right by default
},
},
icons,
mantinePaperProps: {
style: { "--mrt-base-background-color": "var(--card)" },
},
positionToolbarAlertBanner: "none",
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(IconEmptyData, {}), _jsx(Text, { color: "dimmed", children: "No Data Found" })] }) })),
renderToolbarInternalActions: ({ table }) => (_jsxs(Flex, { align: "center", children: [_jsx(MRT_ToggleGlobalFilterButton, { table: table }), _jsx(MRT_ShowHideColumnsButton, { table: table }), _jsx(MRT_ToggleDensePaddingButton, { table: table }), _jsx(MRT_ToggleFullScreenButton, { table: table })] })),
});