mogh_ui 0.7.6 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/data-table.cjs +21 -5
- package/dist/components/data-table.cjs.map +1 -1
- package/dist/components/data-table.d.ts +25 -7
- package/dist/components/data-table.d.ts.map +1 -1
- package/dist/components/data-table.js +33 -8
- package/dist/components/data-table.js.map +1 -1
- package/dist/components/monaco/common.cjs +52 -0
- package/dist/components/monaco/common.cjs.map +1 -0
- package/dist/components/monaco/common.d.ts +27 -0
- package/dist/components/monaco/common.d.ts.map +1 -0
- package/dist/components/monaco/common.js +28 -0
- package/dist/components/monaco/common.js.map +1 -0
- package/dist/components/monaco/editor.cjs +236 -0
- package/dist/components/monaco/editor.cjs.map +1 -0
- package/dist/components/monaco/editor.d.ts +5 -0
- package/dist/components/monaco/editor.d.ts.map +1 -0
- package/dist/components/monaco/editor.js +201 -0
- package/dist/components/monaco/editor.js.map +1 -0
- package/dist/components/monaco/index.cjs +14 -201
- package/dist/components/monaco/index.cjs.map +1 -1
- package/dist/components/monaco/index.d.ts +4 -29
- package/dist/components/monaco/index.d.ts.map +1 -1
- package/dist/components/monaco/index.js +13 -201
- package/dist/components/monaco/index.js.map +1 -1
- package/package.json +25 -25
|
@@ -27,6 +27,20 @@ var import_react = require("react");
|
|
|
27
27
|
var import_react_table = require("@tanstack/react-table");
|
|
28
28
|
var import_core = require("@mantine/core");
|
|
29
29
|
var import_lucide_react = require("lucide-react");
|
|
30
|
+
const features = (0, import_react_table.tableFeatures)({
|
|
31
|
+
rowSortingFeature: import_react_table.rowSortingFeature,
|
|
32
|
+
rowSelectionFeature: import_react_table.rowSelectionFeature,
|
|
33
|
+
columnVisibilityFeature: import_react_table.columnVisibilityFeature,
|
|
34
|
+
sortedRowModel: (0, import_react_table.createSortedRowModel)(),
|
|
35
|
+
sortFns: {
|
|
36
|
+
alphanumeric: import_react_table.sortFn_alphanumeric,
|
|
37
|
+
alphanumericCaseSensitive: import_react_table.sortFn_alphanumericCaseSensitive,
|
|
38
|
+
basic: import_react_table.sortFn_basic,
|
|
39
|
+
datetime: import_react_table.sortFn_datetime,
|
|
40
|
+
text: import_react_table.sortFn_text,
|
|
41
|
+
textCaseSensitive: import_react_table.sortFn_textCaseSensitive
|
|
42
|
+
}
|
|
43
|
+
});
|
|
30
44
|
function loadStoredSorting(tableKey) {
|
|
31
45
|
try {
|
|
32
46
|
const stored = localStorage.getItem("data-table-" + tableKey);
|
|
@@ -64,12 +78,11 @@ function DataTable({
|
|
|
64
78
|
}
|
|
65
79
|
const _internalState = (0, import_react.useState)({});
|
|
66
80
|
const [rowSelection, setRowSelection] = selectOptions?.state ? selectOptions.state : _internalState;
|
|
67
|
-
const table = (0, import_react_table.
|
|
81
|
+
const table = (0, import_react_table.useTable)({
|
|
82
|
+
features,
|
|
68
83
|
data,
|
|
69
84
|
columns: columns.filter((c) => c),
|
|
70
|
-
getCoreRowModel: (0, import_react_table.getCoreRowModel)(),
|
|
71
85
|
onSortingChange: setSorting,
|
|
72
|
-
getSortedRowModel: (0, import_react_table.getSortedRowModel)(),
|
|
73
86
|
manualSorting,
|
|
74
87
|
state: {
|
|
75
88
|
sorting,
|
|
@@ -89,7 +102,7 @@ function DataTable({
|
|
|
89
102
|
(0, import_react.useEffect)(() => {
|
|
90
103
|
selectOptions?.onSelect?.(Object.keys(rowSelection));
|
|
91
104
|
}, [rowSelection]);
|
|
92
|
-
const rows = table.
|
|
105
|
+
const rows = table.getRowModel().rows;
|
|
93
106
|
const tableNode = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
94
107
|
import_core.Table,
|
|
95
108
|
{
|
|
@@ -117,7 +130,10 @@ function DataTable({
|
|
|
117
130
|
color: selectOptions.color ?? "Neutral",
|
|
118
131
|
disabled: selectOptions.disableRow === true,
|
|
119
132
|
checked: table.getIsAllRowsSelected(),
|
|
120
|
-
indeterminate:
|
|
133
|
+
indeterminate: (
|
|
134
|
+
// v9: getIsSomeRowsSelected is true even when all are selected
|
|
135
|
+
table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()
|
|
136
|
+
)
|
|
121
137
|
}
|
|
122
138
|
)
|
|
123
139
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/data-table.tsx"],"sourcesContent":["import {\n Dispatch,\n ReactNode,\n SetStateAction,\n useEffect,\n useLayoutEffect,\n useState,\n} from \"react\";\nimport {\n Column,\n ColumnDef,\n flexRender,\n getCoreRowModel,\n getSortedRowModel,\n Row,\n RowSelectionState,\n SortingState,\n useReactTable,\n} from \"@tanstack/react-table\";\nimport {\n Box,\n BoxProps,\n Center,\n Checkbox,\n DefaultMantineColor,\n Group,\n HoverCard,\n Loader,\n Table,\n TableProps,\n Text,\n UnstyledButton,\n} from \"@mantine/core\";\nimport { ArrowDown, ArrowUp, Info, Minus } from \"lucide-react\";\n\nfunction loadStoredSorting(tableKey: string): SortingState | null {\n try {\n const stored = localStorage.getItem(\"data-table-\" + tableKey);\n return stored ? (JSON.parse(stored) as SortingState) : null;\n } catch {\n return null;\n }\n}\n\nexport interface DataTableProps<TData, TValue = unknown> extends BoxProps {\n /** Unique key given to table so sorting can be remembered on local storage */\n tableKey: string;\n columns: (ColumnDef<TData, TValue> | false | undefined)[];\n data: TData[];\n loading?: boolean;\n onRowClick?: (row: TData) => void;\n noResults?: ReactNode;\n defaultSort?: SortingState;\n sortDescFirst?: boolean;\n /** Sorting is handled externally (eg. server side).\n * The table still manages / persists the sorting state,\n * but does not apply it to the rows. */\n manualSorting?: boolean;\n /** Called with the sorting state whenever it changes.\n * Also called on mount with the initial state\n * (loaded from local storage when available). */\n onSortingStateChange?: (sorting: SortingState) => void;\n selectOptions?: {\n selectKey: (row: TData) => string;\n onSelect?: (selected: string[]) => void;\n state?: [RowSelectionState, Dispatch<SetStateAction<RowSelectionState>>];\n disableRow?: boolean | ((row: Row<TData>) => boolean);\n color?: DefaultMantineColor;\n };\n caption?: string;\n tableProps?: TableProps;\n noBox?: boolean;\n noBorder?: boolean;\n}\n\nexport function DataTable<TData, TValue>({\n tableKey,\n columns,\n data,\n loading,\n onRowClick,\n noResults = <Text c=\"dimmed\">No results</Text>,\n sortDescFirst = false,\n defaultSort = [],\n manualSorting,\n onSortingStateChange,\n selectOptions,\n caption,\n tableProps,\n noBox,\n noBorder,\n mah = \"max(150px, calc(100vh - 320px))\",\n ...boxProps\n}: DataTableProps<TData, TValue>) {\n // Initialized synchronously from local storage so the first render\n // (and any server side sorted query) already uses the persisted sort,\n // instead of flashing through the unsorted state.\n const [sorting, setSorting] = useState<SortingState>(\n () => loadStoredSorting(tableKey) ?? defaultSort,\n );\n const [prevTableKey, setPrevTableKey] = useState(tableKey);\n if (prevTableKey !== tableKey) {\n setPrevTableKey(tableKey);\n setSorting(loadStoredSorting(tableKey) ?? defaultSort);\n }\n\n // intentionally not initialized to clear selected values on table mount\n // could add some prop for adding default selected state to preserve between mounts\n const _internalState = useState<RowSelectionState>({});\n const [rowSelection, setRowSelection] = selectOptions?.state\n ? selectOptions.state\n : _internalState;\n\n const table = useReactTable({\n data,\n columns: columns.filter((c) => c) as any,\n getCoreRowModel: getCoreRowModel(),\n onSortingChange: setSorting,\n getSortedRowModel: getSortedRowModel(),\n manualSorting,\n state: {\n sorting,\n rowSelection,\n },\n sortDescFirst,\n onRowSelectionChange: setRowSelection,\n getRowId: selectOptions?.selectKey,\n enableRowSelection: selectOptions?.disableRow,\n });\n\n useEffect(() => {\n localStorage.setItem(\"data-table-\" + tableKey, JSON.stringify(sorting));\n }, [tableKey, sorting]);\n\n // Layout effect so the parent receives the initial (persisted) sorting\n // before any of its own passive effects run, ie before react-query\n // subscribes a server side sorted query using the pre-sort key.\n useLayoutEffect(() => {\n onSortingStateChange?.(sorting);\n }, [sorting]);\n\n useEffect(() => {\n selectOptions?.onSelect?.(Object.keys(rowSelection));\n }, [rowSelection]);\n\n const rows = table.getPrePaginationRowModel().rows;\n\n const tableNode = (\n <Table\n borderColor=\"accent-border\"\n captionSide=\"top\"\n stickyHeader\n {...tableProps}\n >\n {caption ? <Table.Caption>{caption}</Table.Caption> : null}\n\n <Table.Thead>\n {table.getHeaderGroups().map((hg, i) => (\n <Table.Tr key={hg.id}>\n {i === 0 && selectOptions && (\n <Table.Th\n onClick={() =>\n selectOptions.disableRow !== true &&\n table.toggleAllRowsSelected()\n }\n style={{\n cursor: \"pointer\",\n borderColor: \"var(--mantine-color-accent-border-0)\",\n borderWidth: 0,\n borderRightWidth: 1,\n borderStyle: \"solid\",\n }}\n >\n <Checkbox\n color={selectOptions.color ?? \"Neutral\"}\n disabled={selectOptions.disableRow === true}\n checked={table.getIsAllRowsSelected()}\n indeterminate={table.getIsSomeRowsSelected()}\n />\n </Table.Th>\n )}\n {hg.headers.map((header, i) => {\n // const canSort = header.column.getCanSort();\n // const sortState = header.column.getIsSorted();\n return (\n <Table.Th\n key={header.id}\n px=\"md\"\n style={{\n cursor: \"pointer\",\n borderColor: \"var(--mantine-color-accent-border-0)\",\n borderWidth: 0,\n borderRightWidth: i < hg.headers.length - 1 ? 1 : 0,\n borderStyle: \"solid\",\n }}\n >\n {header.isPlaceholder ? null : (\n <Text fw={600} size=\"sm\" lineClamp={1}>\n {flexRender(\n header.column.columnDef.header,\n header.getContext(),\n )}\n </Text>\n )}\n </Table.Th>\n );\n })}\n </Table.Tr>\n ))}\n </Table.Thead>\n\n <Table.Tbody>\n {loading ? (\n <Table.Tr>\n <Table.Td\n colSpan={\n table.getAllLeafColumns().length + (selectOptions ? 1 : 0)\n }\n >\n <Group justify=\"center\" py=\"lg\">\n <Loader size=\"sm\" />\n </Group>\n </Table.Td>\n </Table.Tr>\n ) : rows.length === 0 ? (\n <Table.Tr>\n <Table.Td\n colSpan={\n table.getAllLeafColumns().length + (selectOptions ? 1 : 0)\n }\n >\n <Group justify=\"center\" py=\"lg\">\n {noResults}\n </Group>\n </Table.Td>\n </Table.Tr>\n ) : (\n rows.map((row) => (\n <Table.Tr\n key={row.id}\n style={{\n cursor: onRowClick ? \"pointer\" : undefined,\n contentVisibility: \"auto\",\n containIntrinsicSize: \"auto 2em\",\n }}\n >\n {selectOptions && (\n <Table.Td onClick={() => row.toggleSelected()}>\n <Checkbox\n aria-label=\"Select row\"\n color={selectOptions.color ?? \"Neutral\"}\n disabled={!row.getCanSelect()}\n checked={row.getIsSelected()}\n />\n </Table.Td>\n )}\n {row.getVisibleCells().map((cell) => (\n <Table.Td\n key={cell.id}\n onClick={\n onRowClick ? () => onRowClick(row.original) : undefined\n }\n style={{ flexWrap: \"nowrap\", textWrap: \"nowrap\" }}\n >\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </Table.Td>\n ))}\n </Table.Tr>\n ))\n )}\n </Table.Tbody>\n </Table>\n );\n\n if (noBox) {\n return tableNode;\n } else {\n return (\n <Box\n p={noBorder ? undefined : \"lg\"}\n pt=\"0\"\n className={noBorder ? undefined : \"bordered-light\"}\n bdrs=\"md\"\n w=\"100%\"\n mah={mah}\n style={{ overflow: \"auto\" }}\n {...boxProps}\n >\n {tableNode}\n </Box>\n );\n }\n}\n\nexport const SortableHeader = <T, V>({\n column,\n title,\n description,\n sortDescFirst,\n disabled,\n}: {\n column: Column<T, V>;\n title: string;\n description?: ReactNode;\n sortDescFirst?: boolean;\n disabled?: boolean;\n}) => {\n if (disabled || !column.getCanSort()) {\n return (\n <Group justify=\"start\" gap=\"xs\" wrap=\"nowrap\" miw=\"120\" w=\"fit-content\">\n <Text fw={600} size=\"sm\" lineClamp={1}>\n {title}\n </Text>\n {description && (\n <HoverCard offset={10}>\n <HoverCard.Target>\n <Info size=\"1rem\" />\n </HoverCard.Target>\n <HoverCard.Dropdown>\n <Text>{description}</Text>\n </HoverCard.Dropdown>\n </HoverCard>\n )}\n </Group>\n );\n }\n return (\n <UnstyledButton\n onClick={column.getToggleSortingHandler()}\n style={{ width: \"100%\" }}\n >\n <Group justify=\"space-between\" gap=\"sm\" wrap=\"nowrap\">\n <Group justify=\"start\" gap=\"xs\" wrap=\"nowrap\" miw=\"120\" w=\"fit-content\">\n <Text fw={600} size=\"sm\" lineClamp={1}>\n {title}\n </Text>\n {description && (\n <HoverCard offset={10}>\n <HoverCard.Target>\n <Info size=\"1rem\" />\n </HoverCard.Target>\n <HoverCard.Dropdown>\n <Text>{description}</Text>\n </HoverCard.Dropdown>\n </HoverCard>\n )}\n </Group>\n <Center>\n <SortIcon\n state={column.getIsSorted()}\n sortDescFirst={sortDescFirst}\n />\n </Center>\n </Group>\n </UnstyledButton>\n );\n};\n\nfunction SortIcon({\n state,\n sortDescFirst,\n}: {\n state: false | \"asc\" | \"desc\";\n sortDescFirst?: boolean;\n}) {\n if (state === \"asc\")\n return sortDescFirst ? <ArrowUp size={14} /> : <ArrowDown size={14} />;\n if (state === \"desc\")\n return sortDescFirst ? <ArrowDown size={14} /> : <ArrowUp size={14} />;\n return <Minus size={14} />;\n}\n"],"mappings":"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","names":["i"]}
|
|
1
|
+
{"version":3,"sources":["../../src/components/data-table.tsx"],"sourcesContent":["import {\n Dispatch,\n ReactNode,\n SetStateAction,\n useEffect,\n useLayoutEffect,\n useState,\n} from \"react\";\nimport {\n Column,\n ColumnDef,\n columnVisibilityFeature,\n createSortedRowModel,\n flexRender,\n Row,\n RowData,\n RowSelectionState,\n rowSelectionFeature,\n rowSortingFeature,\n SortingState,\n sortFn_alphanumeric,\n sortFn_alphanumericCaseSensitive,\n sortFn_basic,\n sortFn_datetime,\n sortFn_text,\n sortFn_textCaseSensitive,\n tableFeatures,\n useTable,\n} from \"@tanstack/react-table\";\nimport {\n Box,\n BoxProps,\n Center,\n Checkbox,\n DefaultMantineColor,\n Group,\n HoverCard,\n Loader,\n Table,\n TableProps,\n Text,\n UnstyledButton,\n} from \"@mantine/core\";\nimport { ArrowDown, ArrowUp, Info, Minus } from \"lucide-react\";\n\n// All built-in sort fns are registered so consumer columns can keep\n// using `sortFn: \"auto\"` (the default) or any built-in name.\nconst features = tableFeatures({\n rowSortingFeature,\n rowSelectionFeature,\n columnVisibilityFeature,\n sortedRowModel: createSortedRowModel(),\n sortFns: {\n alphanumeric: sortFn_alphanumeric,\n alphanumericCaseSensitive: sortFn_alphanumericCaseSensitive,\n basic: sortFn_basic,\n datetime: sortFn_datetime,\n text: sortFn_text,\n textCaseSensitive: sortFn_textCaseSensitive,\n },\n});\n\n/** The table features `DataTable` is built with.\n * Use as the `TFeatures` generic on `ColumnDef` / `Column` etc. */\nexport type DataTableFeatures = typeof features;\n\nfunction loadStoredSorting(tableKey: string): SortingState | null {\n try {\n const stored = localStorage.getItem(\"data-table-\" + tableKey);\n return stored ? (JSON.parse(stored) as SortingState) : null;\n } catch {\n return null;\n }\n}\n\nexport interface DataTableProps<TData extends RowData, TValue = unknown>\n extends BoxProps {\n /** Unique key given to table so sorting can be remembered on local storage */\n tableKey: string;\n columns: (ColumnDef<DataTableFeatures, TData, TValue> | false | undefined)[];\n data: TData[];\n loading?: boolean;\n onRowClick?: (row: TData) => void;\n noResults?: ReactNode;\n defaultSort?: SortingState;\n sortDescFirst?: boolean;\n /** Sorting is handled externally (eg. server side).\n * The table still manages / persists the sorting state,\n * but does not apply it to the rows. */\n manualSorting?: boolean;\n /** Called with the sorting state whenever it changes.\n * Also called on mount with the initial state\n * (loaded from local storage when available). */\n onSortingStateChange?: (sorting: SortingState) => void;\n selectOptions?: {\n selectKey: (row: TData) => string;\n onSelect?: (selected: string[]) => void;\n state?: [RowSelectionState, Dispatch<SetStateAction<RowSelectionState>>];\n disableRow?: boolean | ((row: Row<DataTableFeatures, TData>) => boolean);\n color?: DefaultMantineColor;\n };\n caption?: string;\n tableProps?: TableProps;\n noBox?: boolean;\n noBorder?: boolean;\n}\n\nexport function DataTable<TData extends RowData, TValue>({\n tableKey,\n columns,\n data,\n loading,\n onRowClick,\n noResults = <Text c=\"dimmed\">No results</Text>,\n sortDescFirst = false,\n defaultSort = [],\n manualSorting,\n onSortingStateChange,\n selectOptions,\n caption,\n tableProps,\n noBox,\n noBorder,\n mah = \"max(150px, calc(100vh - 320px))\",\n ...boxProps\n}: DataTableProps<TData, TValue>) {\n // Initialized synchronously from local storage so the first render\n // (and any server side sorted query) already uses the persisted sort,\n // instead of flashing through the unsorted state.\n const [sorting, setSorting] = useState<SortingState>(\n () => loadStoredSorting(tableKey) ?? defaultSort,\n );\n const [prevTableKey, setPrevTableKey] = useState(tableKey);\n if (prevTableKey !== tableKey) {\n setPrevTableKey(tableKey);\n setSorting(loadStoredSorting(tableKey) ?? defaultSort);\n }\n\n // intentionally not initialized to clear selected values on table mount\n // could add some prop for adding default selected state to preserve between mounts\n const _internalState = useState<RowSelectionState>({});\n const [rowSelection, setRowSelection] = selectOptions?.state\n ? selectOptions.state\n : _internalState;\n\n const table = useTable({\n features,\n data,\n columns: columns.filter((c) => c) as any,\n onSortingChange: setSorting,\n manualSorting,\n state: {\n sorting,\n rowSelection,\n },\n sortDescFirst,\n onRowSelectionChange: setRowSelection,\n getRowId: selectOptions?.selectKey,\n enableRowSelection: selectOptions?.disableRow,\n });\n\n useEffect(() => {\n localStorage.setItem(\"data-table-\" + tableKey, JSON.stringify(sorting));\n }, [tableKey, sorting]);\n\n // Layout effect so the parent receives the initial (persisted) sorting\n // before any of its own passive effects run, ie before react-query\n // subscribes a server side sorted query using the pre-sort key.\n useLayoutEffect(() => {\n onSortingStateChange?.(sorting);\n }, [sorting]);\n\n useEffect(() => {\n selectOptions?.onSelect?.(Object.keys(rowSelection));\n }, [rowSelection]);\n\n const rows = table.getRowModel().rows;\n\n const tableNode = (\n <Table\n borderColor=\"accent-border\"\n captionSide=\"top\"\n stickyHeader\n {...tableProps}\n >\n {caption ? <Table.Caption>{caption}</Table.Caption> : null}\n\n <Table.Thead>\n {table.getHeaderGroups().map((hg, i) => (\n <Table.Tr key={hg.id}>\n {i === 0 && selectOptions && (\n <Table.Th\n onClick={() =>\n selectOptions.disableRow !== true &&\n table.toggleAllRowsSelected()\n }\n style={{\n cursor: \"pointer\",\n borderColor: \"var(--mantine-color-accent-border-0)\",\n borderWidth: 0,\n borderRightWidth: 1,\n borderStyle: \"solid\",\n }}\n >\n <Checkbox\n color={selectOptions.color ?? \"Neutral\"}\n disabled={selectOptions.disableRow === true}\n checked={table.getIsAllRowsSelected()}\n indeterminate={\n // v9: getIsSomeRowsSelected is true even when all are selected\n table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()\n }\n />\n </Table.Th>\n )}\n {hg.headers.map((header, i) => {\n // const canSort = header.column.getCanSort();\n // const sortState = header.column.getIsSorted();\n return (\n <Table.Th\n key={header.id}\n px=\"md\"\n style={{\n cursor: \"pointer\",\n borderColor: \"var(--mantine-color-accent-border-0)\",\n borderWidth: 0,\n borderRightWidth: i < hg.headers.length - 1 ? 1 : 0,\n borderStyle: \"solid\",\n }}\n >\n {header.isPlaceholder ? null : (\n <Text fw={600} size=\"sm\" lineClamp={1}>\n {flexRender(\n header.column.columnDef.header,\n header.getContext(),\n )}\n </Text>\n )}\n </Table.Th>\n );\n })}\n </Table.Tr>\n ))}\n </Table.Thead>\n\n <Table.Tbody>\n {loading ? (\n <Table.Tr>\n <Table.Td\n colSpan={\n table.getAllLeafColumns().length + (selectOptions ? 1 : 0)\n }\n >\n <Group justify=\"center\" py=\"lg\">\n <Loader size=\"sm\" />\n </Group>\n </Table.Td>\n </Table.Tr>\n ) : rows.length === 0 ? (\n <Table.Tr>\n <Table.Td\n colSpan={\n table.getAllLeafColumns().length + (selectOptions ? 1 : 0)\n }\n >\n <Group justify=\"center\" py=\"lg\">\n {noResults}\n </Group>\n </Table.Td>\n </Table.Tr>\n ) : (\n rows.map((row) => (\n <Table.Tr\n key={row.id}\n style={{\n cursor: onRowClick ? \"pointer\" : undefined,\n contentVisibility: \"auto\",\n containIntrinsicSize: \"auto 2em\",\n }}\n >\n {selectOptions && (\n <Table.Td onClick={() => row.toggleSelected()}>\n <Checkbox\n aria-label=\"Select row\"\n color={selectOptions.color ?? \"Neutral\"}\n disabled={!row.getCanSelect()}\n checked={row.getIsSelected()}\n />\n </Table.Td>\n )}\n {row.getVisibleCells().map((cell) => (\n <Table.Td\n key={cell.id}\n onClick={\n onRowClick ? () => onRowClick(row.original) : undefined\n }\n style={{ flexWrap: \"nowrap\", textWrap: \"nowrap\" }}\n >\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </Table.Td>\n ))}\n </Table.Tr>\n ))\n )}\n </Table.Tbody>\n </Table>\n );\n\n if (noBox) {\n return tableNode;\n } else {\n return (\n <Box\n p={noBorder ? undefined : \"lg\"}\n pt=\"0\"\n className={noBorder ? undefined : \"bordered-light\"}\n bdrs=\"md\"\n w=\"100%\"\n mah={mah}\n style={{ overflow: \"auto\" }}\n {...boxProps}\n >\n {tableNode}\n </Box>\n );\n }\n}\n\nexport const SortableHeader = <T extends RowData, V>({\n column,\n title,\n description,\n sortDescFirst,\n disabled,\n}: {\n column: Column<DataTableFeatures, T, V>;\n title: string;\n description?: ReactNode;\n sortDescFirst?: boolean;\n disabled?: boolean;\n}) => {\n if (disabled || !column.getCanSort()) {\n return (\n <Group justify=\"start\" gap=\"xs\" wrap=\"nowrap\" miw=\"120\" w=\"fit-content\">\n <Text fw={600} size=\"sm\" lineClamp={1}>\n {title}\n </Text>\n {description && (\n <HoverCard offset={10}>\n <HoverCard.Target>\n <Info size=\"1rem\" />\n </HoverCard.Target>\n <HoverCard.Dropdown>\n <Text>{description}</Text>\n </HoverCard.Dropdown>\n </HoverCard>\n )}\n </Group>\n );\n }\n return (\n <UnstyledButton\n onClick={column.getToggleSortingHandler()}\n style={{ width: \"100%\" }}\n >\n <Group justify=\"space-between\" gap=\"sm\" wrap=\"nowrap\">\n <Group justify=\"start\" gap=\"xs\" wrap=\"nowrap\" miw=\"120\" w=\"fit-content\">\n <Text fw={600} size=\"sm\" lineClamp={1}>\n {title}\n </Text>\n {description && (\n <HoverCard offset={10}>\n <HoverCard.Target>\n <Info size=\"1rem\" />\n </HoverCard.Target>\n <HoverCard.Dropdown>\n <Text>{description}</Text>\n </HoverCard.Dropdown>\n </HoverCard>\n )}\n </Group>\n <Center>\n <SortIcon\n state={column.getIsSorted()}\n sortDescFirst={sortDescFirst}\n />\n </Center>\n </Group>\n </UnstyledButton>\n );\n};\n\nfunction SortIcon({\n state,\n sortDescFirst,\n}: {\n state: false | \"asc\" | \"desc\";\n sortDescFirst?: boolean;\n}) {\n if (state === \"asc\")\n return sortDescFirst ? <ArrowUp size={14} /> : <ArrowDown size={14} />;\n if (state === \"desc\")\n return sortDescFirst ? <ArrowDown size={14} /> : <ArrowUp size={14} />;\n return <Minus size={14} />;\n}\n"],"mappings":"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","names":["i"]}
|
|
@@ -1,10 +1,27 @@
|
|
|
1
1
|
import { Dispatch, ReactNode, SetStateAction } from "react";
|
|
2
|
-
import { Column, ColumnDef, Row, RowSelectionState, SortingState } from "@tanstack/react-table";
|
|
2
|
+
import { Column, ColumnDef, Row, RowData, RowSelectionState, SortingState } from "@tanstack/react-table";
|
|
3
3
|
import { BoxProps, DefaultMantineColor, TableProps } from "@mantine/core";
|
|
4
|
-
|
|
4
|
+
declare const features: {
|
|
5
|
+
rowSortingFeature: import("@tanstack/table-core").TableFeature;
|
|
6
|
+
rowSelectionFeature: import("@tanstack/table-core").TableFeature;
|
|
7
|
+
columnVisibilityFeature: import("@tanstack/table-core").TableFeature;
|
|
8
|
+
sortedRowModel: (table: import("@tanstack/table-core").Table<any, any>) => () => import("@tanstack/table-core").RowModel<any, any>;
|
|
9
|
+
sortFns: {
|
|
10
|
+
alphanumeric: import("@tanstack/table-core").CreatedSortFn<any, any>;
|
|
11
|
+
alphanumericCaseSensitive: import("@tanstack/table-core").CreatedSortFn<any, any>;
|
|
12
|
+
basic: import("@tanstack/table-core").CreatedSortFn<any, any>;
|
|
13
|
+
datetime: import("@tanstack/table-core").CreatedSortFn<any, any>;
|
|
14
|
+
text: import("@tanstack/table-core").CreatedSortFn<any, any>;
|
|
15
|
+
textCaseSensitive: import("@tanstack/table-core").CreatedSortFn<any, any>;
|
|
16
|
+
};
|
|
17
|
+
};
|
|
18
|
+
/** The table features `DataTable` is built with.
|
|
19
|
+
* Use as the `TFeatures` generic on `ColumnDef` / `Column` etc. */
|
|
20
|
+
export type DataTableFeatures = typeof features;
|
|
21
|
+
export interface DataTableProps<TData extends RowData, TValue = unknown> extends BoxProps {
|
|
5
22
|
/** Unique key given to table so sorting can be remembered on local storage */
|
|
6
23
|
tableKey: string;
|
|
7
|
-
columns: (ColumnDef<TData, TValue> | false | undefined)[];
|
|
24
|
+
columns: (ColumnDef<DataTableFeatures, TData, TValue> | false | undefined)[];
|
|
8
25
|
data: TData[];
|
|
9
26
|
loading?: boolean;
|
|
10
27
|
onRowClick?: (row: TData) => void;
|
|
@@ -23,7 +40,7 @@ export interface DataTableProps<TData, TValue = unknown> extends BoxProps {
|
|
|
23
40
|
selectKey: (row: TData) => string;
|
|
24
41
|
onSelect?: (selected: string[]) => void;
|
|
25
42
|
state?: [RowSelectionState, Dispatch<SetStateAction<RowSelectionState>>];
|
|
26
|
-
disableRow?: boolean | ((row: Row<TData>) => boolean);
|
|
43
|
+
disableRow?: boolean | ((row: Row<DataTableFeatures, TData>) => boolean);
|
|
27
44
|
color?: DefaultMantineColor;
|
|
28
45
|
};
|
|
29
46
|
caption?: string;
|
|
@@ -31,12 +48,13 @@ export interface DataTableProps<TData, TValue = unknown> extends BoxProps {
|
|
|
31
48
|
noBox?: boolean;
|
|
32
49
|
noBorder?: boolean;
|
|
33
50
|
}
|
|
34
|
-
export declare function DataTable<TData, TValue>({ tableKey, columns, data, loading, onRowClick, noResults, sortDescFirst, defaultSort, manualSorting, onSortingStateChange, selectOptions, caption, tableProps, noBox, noBorder, mah, ...boxProps }: DataTableProps<TData, TValue>): import("react").JSX.Element;
|
|
35
|
-
export declare const SortableHeader: <T, V>({ column, title, description, sortDescFirst, disabled, }: {
|
|
36
|
-
column: Column<T, V>;
|
|
51
|
+
export declare function DataTable<TData extends RowData, TValue>({ tableKey, columns, data, loading, onRowClick, noResults, sortDescFirst, defaultSort, manualSorting, onSortingStateChange, selectOptions, caption, tableProps, noBox, noBorder, mah, ...boxProps }: DataTableProps<TData, TValue>): import("react").JSX.Element;
|
|
52
|
+
export declare const SortableHeader: <T extends RowData, V>({ column, title, description, sortDescFirst, disabled, }: {
|
|
53
|
+
column: Column<DataTableFeatures, T, V>;
|
|
37
54
|
title: string;
|
|
38
55
|
description?: ReactNode;
|
|
39
56
|
sortDescFirst?: boolean;
|
|
40
57
|
disabled?: boolean;
|
|
41
58
|
}) => import("react").JSX.Element;
|
|
59
|
+
export {};
|
|
42
60
|
//# sourceMappingURL=data-table.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../src/components/data-table.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EACR,SAAS,EACT,cAAc,EAIf,MAAM,OAAO,CAAC;AACf,OAAO,EACL,MAAM,EACN,SAAS,EAIT,GAAG,EACH,iBAAiB,
|
|
1
|
+
{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../src/components/data-table.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EACR,SAAS,EACT,cAAc,EAIf,MAAM,OAAO,CAAC;AACf,OAAO,EACL,MAAM,EACN,SAAS,EAIT,GAAG,EACH,OAAO,EACP,iBAAiB,EAGjB,YAAY,EASb,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAEL,QAAQ,EAGR,mBAAmB,EAKnB,UAAU,EAGX,MAAM,eAAe,CAAC;AAKvB,QAAA,MAAM,QAAQ;;;;;;QAMV,YAAY;QACZ,yBAAyB;QACzB,KAAK;QACL,QAAQ;QACR,IAAI;QACJ,iBAAiB;;CAEnB,CAAC;AAEH;mEACmE;AACnE,MAAM,MAAM,iBAAiB,GAAG,OAAO,QAAQ,CAAC;AAWhD,MAAM,WAAW,cAAc,CAAC,KAAK,SAAS,OAAO,EAAE,MAAM,GAAG,OAAO,CACrE,SAAQ,QAAQ;IAChB,8EAA8E;IAC9E,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,CAAC,SAAS,CAAC,iBAAiB,EAAE,KAAK,EAAE,MAAM,CAAC,GAAG,KAAK,GAAG,SAAS,CAAC,EAAE,CAAC;IAC7E,IAAI,EAAE,KAAK,EAAE,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;4CAEwC;IACxC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;qDAEiD;IACjD,oBAAoB,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;IACvD,aAAa,CAAC,EAAE;QACd,SAAS,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,MAAM,CAAC;QAClC,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;QACxC,KAAK,CAAC,EAAE,CAAC,iBAAiB,EAAE,QAAQ,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC;QACzE,UAAU,CAAC,EAAE,OAAO,GAAG,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,iBAAiB,EAAE,KAAK,CAAC,KAAK,OAAO,CAAC,CAAC;QACzE,KAAK,CAAC,EAAE,mBAAmB,CAAC;KAC7B,CAAC;IACF,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,SAAS,CAAC,KAAK,SAAS,OAAO,EAAE,MAAM,EAAE,EACvD,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,OAAO,EACP,UAAU,EACV,SAA8C,EAC9C,aAAqB,EACrB,WAAgB,EAChB,aAAa,EACb,oBAAoB,EACpB,aAAa,EACb,OAAO,EACP,UAAU,EACV,KAAK,EACL,QAAQ,EACR,GAAuC,EACvC,GAAG,QAAQ,EACZ,EAAE,cAAc,CAAC,KAAK,EAAE,MAAM,CAAC,+BAyM/B;AAED,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,OAAO,EAAE,CAAC,4DAMhD;IACD,MAAM,EAAE,MAAM,CAAC,iBAAiB,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,gCAkDA,CAAC"}
|
|
@@ -5,10 +5,19 @@ import {
|
|
|
5
5
|
useState
|
|
6
6
|
} from "react";
|
|
7
7
|
import {
|
|
8
|
+
columnVisibilityFeature,
|
|
9
|
+
createSortedRowModel,
|
|
8
10
|
flexRender,
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
11
|
+
rowSelectionFeature,
|
|
12
|
+
rowSortingFeature,
|
|
13
|
+
sortFn_alphanumeric,
|
|
14
|
+
sortFn_alphanumericCaseSensitive,
|
|
15
|
+
sortFn_basic,
|
|
16
|
+
sortFn_datetime,
|
|
17
|
+
sortFn_text,
|
|
18
|
+
sortFn_textCaseSensitive,
|
|
19
|
+
tableFeatures,
|
|
20
|
+
useTable
|
|
12
21
|
} from "@tanstack/react-table";
|
|
13
22
|
import {
|
|
14
23
|
Box,
|
|
@@ -22,6 +31,20 @@ import {
|
|
|
22
31
|
UnstyledButton
|
|
23
32
|
} from "@mantine/core";
|
|
24
33
|
import { ArrowDown, ArrowUp, Info, Minus } from "lucide-react";
|
|
34
|
+
const features = tableFeatures({
|
|
35
|
+
rowSortingFeature,
|
|
36
|
+
rowSelectionFeature,
|
|
37
|
+
columnVisibilityFeature,
|
|
38
|
+
sortedRowModel: createSortedRowModel(),
|
|
39
|
+
sortFns: {
|
|
40
|
+
alphanumeric: sortFn_alphanumeric,
|
|
41
|
+
alphanumericCaseSensitive: sortFn_alphanumericCaseSensitive,
|
|
42
|
+
basic: sortFn_basic,
|
|
43
|
+
datetime: sortFn_datetime,
|
|
44
|
+
text: sortFn_text,
|
|
45
|
+
textCaseSensitive: sortFn_textCaseSensitive
|
|
46
|
+
}
|
|
47
|
+
});
|
|
25
48
|
function loadStoredSorting(tableKey) {
|
|
26
49
|
try {
|
|
27
50
|
const stored = localStorage.getItem("data-table-" + tableKey);
|
|
@@ -59,12 +82,11 @@ function DataTable({
|
|
|
59
82
|
}
|
|
60
83
|
const _internalState = useState({});
|
|
61
84
|
const [rowSelection, setRowSelection] = selectOptions?.state ? selectOptions.state : _internalState;
|
|
62
|
-
const table =
|
|
85
|
+
const table = useTable({
|
|
86
|
+
features,
|
|
63
87
|
data,
|
|
64
88
|
columns: columns.filter((c) => c),
|
|
65
|
-
getCoreRowModel: getCoreRowModel(),
|
|
66
89
|
onSortingChange: setSorting,
|
|
67
|
-
getSortedRowModel: getSortedRowModel(),
|
|
68
90
|
manualSorting,
|
|
69
91
|
state: {
|
|
70
92
|
sorting,
|
|
@@ -84,7 +106,7 @@ function DataTable({
|
|
|
84
106
|
useEffect(() => {
|
|
85
107
|
selectOptions?.onSelect?.(Object.keys(rowSelection));
|
|
86
108
|
}, [rowSelection]);
|
|
87
|
-
const rows = table.
|
|
109
|
+
const rows = table.getRowModel().rows;
|
|
88
110
|
const tableNode = /* @__PURE__ */ jsxs(
|
|
89
111
|
Table,
|
|
90
112
|
{
|
|
@@ -112,7 +134,10 @@ function DataTable({
|
|
|
112
134
|
color: selectOptions.color ?? "Neutral",
|
|
113
135
|
disabled: selectOptions.disableRow === true,
|
|
114
136
|
checked: table.getIsAllRowsSelected(),
|
|
115
|
-
indeterminate:
|
|
137
|
+
indeterminate: (
|
|
138
|
+
// v9: getIsSomeRowsSelected is true even when all are selected
|
|
139
|
+
table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()
|
|
140
|
+
)
|
|
116
141
|
}
|
|
117
142
|
)
|
|
118
143
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/data-table.tsx"],"sourcesContent":["import {\n Dispatch,\n ReactNode,\n SetStateAction,\n useEffect,\n useLayoutEffect,\n useState,\n} from \"react\";\nimport {\n Column,\n ColumnDef,\n flexRender,\n getCoreRowModel,\n getSortedRowModel,\n Row,\n RowSelectionState,\n SortingState,\n useReactTable,\n} from \"@tanstack/react-table\";\nimport {\n Box,\n BoxProps,\n Center,\n Checkbox,\n DefaultMantineColor,\n Group,\n HoverCard,\n Loader,\n Table,\n TableProps,\n Text,\n UnstyledButton,\n} from \"@mantine/core\";\nimport { ArrowDown, ArrowUp, Info, Minus } from \"lucide-react\";\n\nfunction loadStoredSorting(tableKey: string): SortingState | null {\n try {\n const stored = localStorage.getItem(\"data-table-\" + tableKey);\n return stored ? (JSON.parse(stored) as SortingState) : null;\n } catch {\n return null;\n }\n}\n\nexport interface DataTableProps<TData, TValue = unknown> extends BoxProps {\n /** Unique key given to table so sorting can be remembered on local storage */\n tableKey: string;\n columns: (ColumnDef<TData, TValue> | false | undefined)[];\n data: TData[];\n loading?: boolean;\n onRowClick?: (row: TData) => void;\n noResults?: ReactNode;\n defaultSort?: SortingState;\n sortDescFirst?: boolean;\n /** Sorting is handled externally (eg. server side).\n * The table still manages / persists the sorting state,\n * but does not apply it to the rows. */\n manualSorting?: boolean;\n /** Called with the sorting state whenever it changes.\n * Also called on mount with the initial state\n * (loaded from local storage when available). */\n onSortingStateChange?: (sorting: SortingState) => void;\n selectOptions?: {\n selectKey: (row: TData) => string;\n onSelect?: (selected: string[]) => void;\n state?: [RowSelectionState, Dispatch<SetStateAction<RowSelectionState>>];\n disableRow?: boolean | ((row: Row<TData>) => boolean);\n color?: DefaultMantineColor;\n };\n caption?: string;\n tableProps?: TableProps;\n noBox?: boolean;\n noBorder?: boolean;\n}\n\nexport function DataTable<TData, TValue>({\n tableKey,\n columns,\n data,\n loading,\n onRowClick,\n noResults = <Text c=\"dimmed\">No results</Text>,\n sortDescFirst = false,\n defaultSort = [],\n manualSorting,\n onSortingStateChange,\n selectOptions,\n caption,\n tableProps,\n noBox,\n noBorder,\n mah = \"max(150px, calc(100vh - 320px))\",\n ...boxProps\n}: DataTableProps<TData, TValue>) {\n // Initialized synchronously from local storage so the first render\n // (and any server side sorted query) already uses the persisted sort,\n // instead of flashing through the unsorted state.\n const [sorting, setSorting] = useState<SortingState>(\n () => loadStoredSorting(tableKey) ?? defaultSort,\n );\n const [prevTableKey, setPrevTableKey] = useState(tableKey);\n if (prevTableKey !== tableKey) {\n setPrevTableKey(tableKey);\n setSorting(loadStoredSorting(tableKey) ?? defaultSort);\n }\n\n // intentionally not initialized to clear selected values on table mount\n // could add some prop for adding default selected state to preserve between mounts\n const _internalState = useState<RowSelectionState>({});\n const [rowSelection, setRowSelection] = selectOptions?.state\n ? selectOptions.state\n : _internalState;\n\n const table = useReactTable({\n data,\n columns: columns.filter((c) => c) as any,\n getCoreRowModel: getCoreRowModel(),\n onSortingChange: setSorting,\n getSortedRowModel: getSortedRowModel(),\n manualSorting,\n state: {\n sorting,\n rowSelection,\n },\n sortDescFirst,\n onRowSelectionChange: setRowSelection,\n getRowId: selectOptions?.selectKey,\n enableRowSelection: selectOptions?.disableRow,\n });\n\n useEffect(() => {\n localStorage.setItem(\"data-table-\" + tableKey, JSON.stringify(sorting));\n }, [tableKey, sorting]);\n\n // Layout effect so the parent receives the initial (persisted) sorting\n // before any of its own passive effects run, ie before react-query\n // subscribes a server side sorted query using the pre-sort key.\n useLayoutEffect(() => {\n onSortingStateChange?.(sorting);\n }, [sorting]);\n\n useEffect(() => {\n selectOptions?.onSelect?.(Object.keys(rowSelection));\n }, [rowSelection]);\n\n const rows = table.getPrePaginationRowModel().rows;\n\n const tableNode = (\n <Table\n borderColor=\"accent-border\"\n captionSide=\"top\"\n stickyHeader\n {...tableProps}\n >\n {caption ? <Table.Caption>{caption}</Table.Caption> : null}\n\n <Table.Thead>\n {table.getHeaderGroups().map((hg, i) => (\n <Table.Tr key={hg.id}>\n {i === 0 && selectOptions && (\n <Table.Th\n onClick={() =>\n selectOptions.disableRow !== true &&\n table.toggleAllRowsSelected()\n }\n style={{\n cursor: \"pointer\",\n borderColor: \"var(--mantine-color-accent-border-0)\",\n borderWidth: 0,\n borderRightWidth: 1,\n borderStyle: \"solid\",\n }}\n >\n <Checkbox\n color={selectOptions.color ?? \"Neutral\"}\n disabled={selectOptions.disableRow === true}\n checked={table.getIsAllRowsSelected()}\n indeterminate={table.getIsSomeRowsSelected()}\n />\n </Table.Th>\n )}\n {hg.headers.map((header, i) => {\n // const canSort = header.column.getCanSort();\n // const sortState = header.column.getIsSorted();\n return (\n <Table.Th\n key={header.id}\n px=\"md\"\n style={{\n cursor: \"pointer\",\n borderColor: \"var(--mantine-color-accent-border-0)\",\n borderWidth: 0,\n borderRightWidth: i < hg.headers.length - 1 ? 1 : 0,\n borderStyle: \"solid\",\n }}\n >\n {header.isPlaceholder ? null : (\n <Text fw={600} size=\"sm\" lineClamp={1}>\n {flexRender(\n header.column.columnDef.header,\n header.getContext(),\n )}\n </Text>\n )}\n </Table.Th>\n );\n })}\n </Table.Tr>\n ))}\n </Table.Thead>\n\n <Table.Tbody>\n {loading ? (\n <Table.Tr>\n <Table.Td\n colSpan={\n table.getAllLeafColumns().length + (selectOptions ? 1 : 0)\n }\n >\n <Group justify=\"center\" py=\"lg\">\n <Loader size=\"sm\" />\n </Group>\n </Table.Td>\n </Table.Tr>\n ) : rows.length === 0 ? (\n <Table.Tr>\n <Table.Td\n colSpan={\n table.getAllLeafColumns().length + (selectOptions ? 1 : 0)\n }\n >\n <Group justify=\"center\" py=\"lg\">\n {noResults}\n </Group>\n </Table.Td>\n </Table.Tr>\n ) : (\n rows.map((row) => (\n <Table.Tr\n key={row.id}\n style={{\n cursor: onRowClick ? \"pointer\" : undefined,\n contentVisibility: \"auto\",\n containIntrinsicSize: \"auto 2em\",\n }}\n >\n {selectOptions && (\n <Table.Td onClick={() => row.toggleSelected()}>\n <Checkbox\n aria-label=\"Select row\"\n color={selectOptions.color ?? \"Neutral\"}\n disabled={!row.getCanSelect()}\n checked={row.getIsSelected()}\n />\n </Table.Td>\n )}\n {row.getVisibleCells().map((cell) => (\n <Table.Td\n key={cell.id}\n onClick={\n onRowClick ? () => onRowClick(row.original) : undefined\n }\n style={{ flexWrap: \"nowrap\", textWrap: \"nowrap\" }}\n >\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </Table.Td>\n ))}\n </Table.Tr>\n ))\n )}\n </Table.Tbody>\n </Table>\n );\n\n if (noBox) {\n return tableNode;\n } else {\n return (\n <Box\n p={noBorder ? undefined : \"lg\"}\n pt=\"0\"\n className={noBorder ? undefined : \"bordered-light\"}\n bdrs=\"md\"\n w=\"100%\"\n mah={mah}\n style={{ overflow: \"auto\" }}\n {...boxProps}\n >\n {tableNode}\n </Box>\n );\n }\n}\n\nexport const SortableHeader = <T, V>({\n column,\n title,\n description,\n sortDescFirst,\n disabled,\n}: {\n column: Column<T, V>;\n title: string;\n description?: ReactNode;\n sortDescFirst?: boolean;\n disabled?: boolean;\n}) => {\n if (disabled || !column.getCanSort()) {\n return (\n <Group justify=\"start\" gap=\"xs\" wrap=\"nowrap\" miw=\"120\" w=\"fit-content\">\n <Text fw={600} size=\"sm\" lineClamp={1}>\n {title}\n </Text>\n {description && (\n <HoverCard offset={10}>\n <HoverCard.Target>\n <Info size=\"1rem\" />\n </HoverCard.Target>\n <HoverCard.Dropdown>\n <Text>{description}</Text>\n </HoverCard.Dropdown>\n </HoverCard>\n )}\n </Group>\n );\n }\n return (\n <UnstyledButton\n onClick={column.getToggleSortingHandler()}\n style={{ width: \"100%\" }}\n >\n <Group justify=\"space-between\" gap=\"sm\" wrap=\"nowrap\">\n <Group justify=\"start\" gap=\"xs\" wrap=\"nowrap\" miw=\"120\" w=\"fit-content\">\n <Text fw={600} size=\"sm\" lineClamp={1}>\n {title}\n </Text>\n {description && (\n <HoverCard offset={10}>\n <HoverCard.Target>\n <Info size=\"1rem\" />\n </HoverCard.Target>\n <HoverCard.Dropdown>\n <Text>{description}</Text>\n </HoverCard.Dropdown>\n </HoverCard>\n )}\n </Group>\n <Center>\n <SortIcon\n state={column.getIsSorted()}\n sortDescFirst={sortDescFirst}\n />\n </Center>\n </Group>\n </UnstyledButton>\n );\n};\n\nfunction SortIcon({\n state,\n sortDescFirst,\n}: {\n state: false | \"asc\" | \"desc\";\n sortDescFirst?: boolean;\n}) {\n if (state === \"asc\")\n return sortDescFirst ? <ArrowUp size={14} /> : <ArrowDown size={14} />;\n if (state === \"desc\")\n return sortDescFirst ? <ArrowDown size={14} /> : <ArrowUp size={14} />;\n return <Minus size={14} />;\n}\n"],"mappings":"AAiFc,cA6EJ,YA7EI;AAjFd;AAAA,EAIE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP;AAAA,EAGE;AAAA,EACA;AAAA,EACA;AAAA,EAIA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EAEA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AACP,SAAS,WAAW,SAAS,MAAM,aAAa;AAEhD,SAAS,kBAAkB,UAAuC;AAChE,MAAI;AACF,UAAM,SAAS,aAAa,QAAQ,gBAAgB,QAAQ;AAC5D,WAAO,SAAU,KAAK,MAAM,MAAM,IAAqB;AAAA,EACzD,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAiCO,SAAS,UAAyB;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY,oBAAC,QAAK,GAAE,UAAS,wBAAU;AAAA,EACvC,gBAAgB;AAAA,EAChB,cAAc,CAAC;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN,GAAG;AACL,GAAkC;AAIhC,QAAM,CAAC,SAAS,UAAU,IAAI;AAAA,IAC5B,MAAM,kBAAkB,QAAQ,KAAK;AAAA,EACvC;AACA,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,QAAQ;AACzD,MAAI,iBAAiB,UAAU;AAC7B,oBAAgB,QAAQ;AACxB,eAAW,kBAAkB,QAAQ,KAAK,WAAW;AAAA,EACvD;AAIA,QAAM,iBAAiB,SAA4B,CAAC,CAAC;AACrD,QAAM,CAAC,cAAc,eAAe,IAAI,eAAe,QACnD,cAAc,QACd;AAEJ,QAAM,QAAQ,cAAc;AAAA,IAC1B;AAAA,IACA,SAAS,QAAQ,OAAO,CAAC,MAAM,CAAC;AAAA,IAChC,iBAAiB,gBAAgB;AAAA,IACjC,iBAAiB;AAAA,IACjB,mBAAmB,kBAAkB;AAAA,IACrC;AAAA,IACA,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,IACA,sBAAsB;AAAA,IACtB,UAAU,eAAe;AAAA,IACzB,oBAAoB,eAAe;AAAA,EACrC,CAAC;AAED,YAAU,MAAM;AACd,iBAAa,QAAQ,gBAAgB,UAAU,KAAK,UAAU,OAAO,CAAC;AAAA,EACxE,GAAG,CAAC,UAAU,OAAO,CAAC;AAKtB,kBAAgB,MAAM;AACpB,2BAAuB,OAAO;AAAA,EAChC,GAAG,CAAC,OAAO,CAAC;AAEZ,YAAU,MAAM;AACd,mBAAe,WAAW,OAAO,KAAK,YAAY,CAAC;AAAA,EACrD,GAAG,CAAC,YAAY,CAAC;AAEjB,QAAM,OAAO,MAAM,yBAAyB,EAAE;AAE9C,QAAM,YACJ;AAAA,IAAC;AAAA;AAAA,MACC,aAAY;AAAA,MACZ,aAAY;AAAA,MACZ,cAAY;AAAA,MACX,GAAG;AAAA,MAEH;AAAA,kBAAU,oBAAC,MAAM,SAAN,EAAe,mBAAQ,IAAmB;AAAA,QAEtD,oBAAC,MAAM,OAAN,EACE,gBAAM,gBAAgB,EAAE,IAAI,CAAC,IAAI,MAChC,qBAAC,MAAM,IAAN,EACE;AAAA,gBAAM,KAAK,iBACV;AAAA,YAAC,MAAM;AAAA,YAAN;AAAA,cACC,SAAS,MACP,cAAc,eAAe,QAC7B,MAAM,sBAAsB;AAAA,cAE9B,OAAO;AAAA,gBACL,QAAQ;AAAA,gBACR,aAAa;AAAA,gBACb,aAAa;AAAA,gBACb,kBAAkB;AAAA,gBAClB,aAAa;AAAA,cACf;AAAA,cAEA;AAAA,gBAAC;AAAA;AAAA,kBACC,OAAO,cAAc,SAAS;AAAA,kBAC9B,UAAU,cAAc,eAAe;AAAA,kBACvC,SAAS,MAAM,qBAAqB;AAAA,kBACpC,eAAe,MAAM,sBAAsB;AAAA;AAAA,cAC7C;AAAA;AAAA,UACF;AAAA,UAED,GAAG,QAAQ,IAAI,CAAC,QAAQA,OAAM;AAG7B,mBACE;AAAA,cAAC,MAAM;AAAA,cAAN;AAAA,gBAEC,IAAG;AAAA,gBACH,OAAO;AAAA,kBACL,QAAQ;AAAA,kBACR,aAAa;AAAA,kBACb,aAAa;AAAA,kBACb,kBAAkBA,KAAI,GAAG,QAAQ,SAAS,IAAI,IAAI;AAAA,kBAClD,aAAa;AAAA,gBACf;AAAA,gBAEC,iBAAO,gBAAgB,OACtB,oBAAC,QAAK,IAAI,KAAK,MAAK,MAAK,WAAW,GACjC;AAAA,kBACC,OAAO,OAAO,UAAU;AAAA,kBACxB,OAAO,WAAW;AAAA,gBACpB,GACF;AAAA;AAAA,cAhBG,OAAO;AAAA,YAkBd;AAAA,UAEJ,CAAC;AAAA,aAhDY,GAAG,EAiDlB,CACD,GACH;AAAA,QAEA,oBAAC,MAAM,OAAN,EACE,oBACC,oBAAC,MAAM,IAAN,EACC;AAAA,UAAC,MAAM;AAAA,UAAN;AAAA,YACC,SACE,MAAM,kBAAkB,EAAE,UAAU,gBAAgB,IAAI;AAAA,YAG1D,8BAAC,SAAM,SAAQ,UAAS,IAAG,MACzB,8BAAC,UAAO,MAAK,MAAK,GACpB;AAAA;AAAA,QACF,GACF,IACE,KAAK,WAAW,IAClB,oBAAC,MAAM,IAAN,EACC;AAAA,UAAC,MAAM;AAAA,UAAN;AAAA,YACC,SACE,MAAM,kBAAkB,EAAE,UAAU,gBAAgB,IAAI;AAAA,YAG1D,8BAAC,SAAM,SAAQ,UAAS,IAAG,MACxB,qBACH;AAAA;AAAA,QACF,GACF,IAEA,KAAK,IAAI,CAAC,QACR;AAAA,UAAC,MAAM;AAAA,UAAN;AAAA,YAEC,OAAO;AAAA,cACL,QAAQ,aAAa,YAAY;AAAA,cACjC,mBAAmB;AAAA,cACnB,sBAAsB;AAAA,YACxB;AAAA,YAEC;AAAA,+BACC,oBAAC,MAAM,IAAN,EAAS,SAAS,MAAM,IAAI,eAAe,GAC1C;AAAA,gBAAC;AAAA;AAAA,kBACC,cAAW;AAAA,kBACX,OAAO,cAAc,SAAS;AAAA,kBAC9B,UAAU,CAAC,IAAI,aAAa;AAAA,kBAC5B,SAAS,IAAI,cAAc;AAAA;AAAA,cAC7B,GACF;AAAA,cAED,IAAI,gBAAgB,EAAE,IAAI,CAAC,SAC1B;AAAA,gBAAC,MAAM;AAAA,gBAAN;AAAA,kBAEC,SACE,aAAa,MAAM,WAAW,IAAI,QAAQ,IAAI;AAAA,kBAEhD,OAAO,EAAE,UAAU,UAAU,UAAU,SAAS;AAAA,kBAE/C,qBAAW,KAAK,OAAO,UAAU,MAAM,KAAK,WAAW,CAAC;AAAA;AAAA,gBANpD,KAAK;AAAA,cAOZ,CACD;AAAA;AAAA;AAAA,UA3BI,IAAI;AAAA,QA4BX,CACD,GAEL;AAAA;AAAA;AAAA,EACF;AAGF,MAAI,OAAO;AACT,WAAO;AAAA,EACT,OAAO;AACL,WACE;AAAA,MAAC;AAAA;AAAA,QACC,GAAG,WAAW,SAAY;AAAA,QAC1B,IAAG;AAAA,QACH,WAAW,WAAW,SAAY;AAAA,QAClC,MAAK;AAAA,QACL,GAAE;AAAA,QACF;AAAA,QACA,OAAO,EAAE,UAAU,OAAO;AAAA,QACzB,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEO,MAAM,iBAAiB,CAAO;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAMM;AACJ,MAAI,YAAY,CAAC,OAAO,WAAW,GAAG;AACpC,WACE,qBAAC,SAAM,SAAQ,SAAQ,KAAI,MAAK,MAAK,UAAS,KAAI,OAAM,GAAE,eACxD;AAAA,0BAAC,QAAK,IAAI,KAAK,MAAK,MAAK,WAAW,GACjC,iBACH;AAAA,MACC,eACC,qBAAC,aAAU,QAAQ,IACjB;AAAA,4BAAC,UAAU,QAAV,EACC,8BAAC,QAAK,MAAK,QAAO,GACpB;AAAA,QACA,oBAAC,UAAU,UAAV,EACC,8BAAC,QAAM,uBAAY,GACrB;AAAA,SACF;AAAA,OAEJ;AAAA,EAEJ;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,OAAO,wBAAwB;AAAA,MACxC,OAAO,EAAE,OAAO,OAAO;AAAA,MAEvB,+BAAC,SAAM,SAAQ,iBAAgB,KAAI,MAAK,MAAK,UAC3C;AAAA,6BAAC,SAAM,SAAQ,SAAQ,KAAI,MAAK,MAAK,UAAS,KAAI,OAAM,GAAE,eACxD;AAAA,8BAAC,QAAK,IAAI,KAAK,MAAK,MAAK,WAAW,GACjC,iBACH;AAAA,UACC,eACC,qBAAC,aAAU,QAAQ,IACjB;AAAA,gCAAC,UAAU,QAAV,EACC,8BAAC,QAAK,MAAK,QAAO,GACpB;AAAA,YACA,oBAAC,UAAU,UAAV,EACC,8BAAC,QAAM,uBAAY,GACrB;AAAA,aACF;AAAA,WAEJ;AAAA,QACA,oBAAC,UACC;AAAA,UAAC;AAAA;AAAA,YACC,OAAO,OAAO,YAAY;AAAA,YAC1B;AAAA;AAAA,QACF,GACF;AAAA,SACF;AAAA;AAAA,EACF;AAEJ;AAEA,SAAS,SAAS;AAAA,EAChB;AAAA,EACA;AACF,GAGG;AACD,MAAI,UAAU;AACZ,WAAO,gBAAgB,oBAAC,WAAQ,MAAM,IAAI,IAAK,oBAAC,aAAU,MAAM,IAAI;AACtE,MAAI,UAAU;AACZ,WAAO,gBAAgB,oBAAC,aAAU,MAAM,IAAI,IAAK,oBAAC,WAAQ,MAAM,IAAI;AACtE,SAAO,oBAAC,SAAM,MAAM,IAAI;AAC1B;","names":["i"]}
|
|
1
|
+
{"version":3,"sources":["../../src/components/data-table.tsx"],"sourcesContent":["import {\n Dispatch,\n ReactNode,\n SetStateAction,\n useEffect,\n useLayoutEffect,\n useState,\n} from \"react\";\nimport {\n Column,\n ColumnDef,\n columnVisibilityFeature,\n createSortedRowModel,\n flexRender,\n Row,\n RowData,\n RowSelectionState,\n rowSelectionFeature,\n rowSortingFeature,\n SortingState,\n sortFn_alphanumeric,\n sortFn_alphanumericCaseSensitive,\n sortFn_basic,\n sortFn_datetime,\n sortFn_text,\n sortFn_textCaseSensitive,\n tableFeatures,\n useTable,\n} from \"@tanstack/react-table\";\nimport {\n Box,\n BoxProps,\n Center,\n Checkbox,\n DefaultMantineColor,\n Group,\n HoverCard,\n Loader,\n Table,\n TableProps,\n Text,\n UnstyledButton,\n} from \"@mantine/core\";\nimport { ArrowDown, ArrowUp, Info, Minus } from \"lucide-react\";\n\n// All built-in sort fns are registered so consumer columns can keep\n// using `sortFn: \"auto\"` (the default) or any built-in name.\nconst features = tableFeatures({\n rowSortingFeature,\n rowSelectionFeature,\n columnVisibilityFeature,\n sortedRowModel: createSortedRowModel(),\n sortFns: {\n alphanumeric: sortFn_alphanumeric,\n alphanumericCaseSensitive: sortFn_alphanumericCaseSensitive,\n basic: sortFn_basic,\n datetime: sortFn_datetime,\n text: sortFn_text,\n textCaseSensitive: sortFn_textCaseSensitive,\n },\n});\n\n/** The table features `DataTable` is built with.\n * Use as the `TFeatures` generic on `ColumnDef` / `Column` etc. */\nexport type DataTableFeatures = typeof features;\n\nfunction loadStoredSorting(tableKey: string): SortingState | null {\n try {\n const stored = localStorage.getItem(\"data-table-\" + tableKey);\n return stored ? (JSON.parse(stored) as SortingState) : null;\n } catch {\n return null;\n }\n}\n\nexport interface DataTableProps<TData extends RowData, TValue = unknown>\n extends BoxProps {\n /** Unique key given to table so sorting can be remembered on local storage */\n tableKey: string;\n columns: (ColumnDef<DataTableFeatures, TData, TValue> | false | undefined)[];\n data: TData[];\n loading?: boolean;\n onRowClick?: (row: TData) => void;\n noResults?: ReactNode;\n defaultSort?: SortingState;\n sortDescFirst?: boolean;\n /** Sorting is handled externally (eg. server side).\n * The table still manages / persists the sorting state,\n * but does not apply it to the rows. */\n manualSorting?: boolean;\n /** Called with the sorting state whenever it changes.\n * Also called on mount with the initial state\n * (loaded from local storage when available). */\n onSortingStateChange?: (sorting: SortingState) => void;\n selectOptions?: {\n selectKey: (row: TData) => string;\n onSelect?: (selected: string[]) => void;\n state?: [RowSelectionState, Dispatch<SetStateAction<RowSelectionState>>];\n disableRow?: boolean | ((row: Row<DataTableFeatures, TData>) => boolean);\n color?: DefaultMantineColor;\n };\n caption?: string;\n tableProps?: TableProps;\n noBox?: boolean;\n noBorder?: boolean;\n}\n\nexport function DataTable<TData extends RowData, TValue>({\n tableKey,\n columns,\n data,\n loading,\n onRowClick,\n noResults = <Text c=\"dimmed\">No results</Text>,\n sortDescFirst = false,\n defaultSort = [],\n manualSorting,\n onSortingStateChange,\n selectOptions,\n caption,\n tableProps,\n noBox,\n noBorder,\n mah = \"max(150px, calc(100vh - 320px))\",\n ...boxProps\n}: DataTableProps<TData, TValue>) {\n // Initialized synchronously from local storage so the first render\n // (and any server side sorted query) already uses the persisted sort,\n // instead of flashing through the unsorted state.\n const [sorting, setSorting] = useState<SortingState>(\n () => loadStoredSorting(tableKey) ?? defaultSort,\n );\n const [prevTableKey, setPrevTableKey] = useState(tableKey);\n if (prevTableKey !== tableKey) {\n setPrevTableKey(tableKey);\n setSorting(loadStoredSorting(tableKey) ?? defaultSort);\n }\n\n // intentionally not initialized to clear selected values on table mount\n // could add some prop for adding default selected state to preserve between mounts\n const _internalState = useState<RowSelectionState>({});\n const [rowSelection, setRowSelection] = selectOptions?.state\n ? selectOptions.state\n : _internalState;\n\n const table = useTable({\n features,\n data,\n columns: columns.filter((c) => c) as any,\n onSortingChange: setSorting,\n manualSorting,\n state: {\n sorting,\n rowSelection,\n },\n sortDescFirst,\n onRowSelectionChange: setRowSelection,\n getRowId: selectOptions?.selectKey,\n enableRowSelection: selectOptions?.disableRow,\n });\n\n useEffect(() => {\n localStorage.setItem(\"data-table-\" + tableKey, JSON.stringify(sorting));\n }, [tableKey, sorting]);\n\n // Layout effect so the parent receives the initial (persisted) sorting\n // before any of its own passive effects run, ie before react-query\n // subscribes a server side sorted query using the pre-sort key.\n useLayoutEffect(() => {\n onSortingStateChange?.(sorting);\n }, [sorting]);\n\n useEffect(() => {\n selectOptions?.onSelect?.(Object.keys(rowSelection));\n }, [rowSelection]);\n\n const rows = table.getRowModel().rows;\n\n const tableNode = (\n <Table\n borderColor=\"accent-border\"\n captionSide=\"top\"\n stickyHeader\n {...tableProps}\n >\n {caption ? <Table.Caption>{caption}</Table.Caption> : null}\n\n <Table.Thead>\n {table.getHeaderGroups().map((hg, i) => (\n <Table.Tr key={hg.id}>\n {i === 0 && selectOptions && (\n <Table.Th\n onClick={() =>\n selectOptions.disableRow !== true &&\n table.toggleAllRowsSelected()\n }\n style={{\n cursor: \"pointer\",\n borderColor: \"var(--mantine-color-accent-border-0)\",\n borderWidth: 0,\n borderRightWidth: 1,\n borderStyle: \"solid\",\n }}\n >\n <Checkbox\n color={selectOptions.color ?? \"Neutral\"}\n disabled={selectOptions.disableRow === true}\n checked={table.getIsAllRowsSelected()}\n indeterminate={\n // v9: getIsSomeRowsSelected is true even when all are selected\n table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()\n }\n />\n </Table.Th>\n )}\n {hg.headers.map((header, i) => {\n // const canSort = header.column.getCanSort();\n // const sortState = header.column.getIsSorted();\n return (\n <Table.Th\n key={header.id}\n px=\"md\"\n style={{\n cursor: \"pointer\",\n borderColor: \"var(--mantine-color-accent-border-0)\",\n borderWidth: 0,\n borderRightWidth: i < hg.headers.length - 1 ? 1 : 0,\n borderStyle: \"solid\",\n }}\n >\n {header.isPlaceholder ? null : (\n <Text fw={600} size=\"sm\" lineClamp={1}>\n {flexRender(\n header.column.columnDef.header,\n header.getContext(),\n )}\n </Text>\n )}\n </Table.Th>\n );\n })}\n </Table.Tr>\n ))}\n </Table.Thead>\n\n <Table.Tbody>\n {loading ? (\n <Table.Tr>\n <Table.Td\n colSpan={\n table.getAllLeafColumns().length + (selectOptions ? 1 : 0)\n }\n >\n <Group justify=\"center\" py=\"lg\">\n <Loader size=\"sm\" />\n </Group>\n </Table.Td>\n </Table.Tr>\n ) : rows.length === 0 ? (\n <Table.Tr>\n <Table.Td\n colSpan={\n table.getAllLeafColumns().length + (selectOptions ? 1 : 0)\n }\n >\n <Group justify=\"center\" py=\"lg\">\n {noResults}\n </Group>\n </Table.Td>\n </Table.Tr>\n ) : (\n rows.map((row) => (\n <Table.Tr\n key={row.id}\n style={{\n cursor: onRowClick ? \"pointer\" : undefined,\n contentVisibility: \"auto\",\n containIntrinsicSize: \"auto 2em\",\n }}\n >\n {selectOptions && (\n <Table.Td onClick={() => row.toggleSelected()}>\n <Checkbox\n aria-label=\"Select row\"\n color={selectOptions.color ?? \"Neutral\"}\n disabled={!row.getCanSelect()}\n checked={row.getIsSelected()}\n />\n </Table.Td>\n )}\n {row.getVisibleCells().map((cell) => (\n <Table.Td\n key={cell.id}\n onClick={\n onRowClick ? () => onRowClick(row.original) : undefined\n }\n style={{ flexWrap: \"nowrap\", textWrap: \"nowrap\" }}\n >\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </Table.Td>\n ))}\n </Table.Tr>\n ))\n )}\n </Table.Tbody>\n </Table>\n );\n\n if (noBox) {\n return tableNode;\n } else {\n return (\n <Box\n p={noBorder ? undefined : \"lg\"}\n pt=\"0\"\n className={noBorder ? undefined : \"bordered-light\"}\n bdrs=\"md\"\n w=\"100%\"\n mah={mah}\n style={{ overflow: \"auto\" }}\n {...boxProps}\n >\n {tableNode}\n </Box>\n );\n }\n}\n\nexport const SortableHeader = <T extends RowData, V>({\n column,\n title,\n description,\n sortDescFirst,\n disabled,\n}: {\n column: Column<DataTableFeatures, T, V>;\n title: string;\n description?: ReactNode;\n sortDescFirst?: boolean;\n disabled?: boolean;\n}) => {\n if (disabled || !column.getCanSort()) {\n return (\n <Group justify=\"start\" gap=\"xs\" wrap=\"nowrap\" miw=\"120\" w=\"fit-content\">\n <Text fw={600} size=\"sm\" lineClamp={1}>\n {title}\n </Text>\n {description && (\n <HoverCard offset={10}>\n <HoverCard.Target>\n <Info size=\"1rem\" />\n </HoverCard.Target>\n <HoverCard.Dropdown>\n <Text>{description}</Text>\n </HoverCard.Dropdown>\n </HoverCard>\n )}\n </Group>\n );\n }\n return (\n <UnstyledButton\n onClick={column.getToggleSortingHandler()}\n style={{ width: \"100%\" }}\n >\n <Group justify=\"space-between\" gap=\"sm\" wrap=\"nowrap\">\n <Group justify=\"start\" gap=\"xs\" wrap=\"nowrap\" miw=\"120\" w=\"fit-content\">\n <Text fw={600} size=\"sm\" lineClamp={1}>\n {title}\n </Text>\n {description && (\n <HoverCard offset={10}>\n <HoverCard.Target>\n <Info size=\"1rem\" />\n </HoverCard.Target>\n <HoverCard.Dropdown>\n <Text>{description}</Text>\n </HoverCard.Dropdown>\n </HoverCard>\n )}\n </Group>\n <Center>\n <SortIcon\n state={column.getIsSorted()}\n sortDescFirst={sortDescFirst}\n />\n </Center>\n </Group>\n </UnstyledButton>\n );\n};\n\nfunction SortIcon({\n state,\n sortDescFirst,\n}: {\n state: false | \"asc\" | \"desc\";\n sortDescFirst?: boolean;\n}) {\n if (state === \"asc\")\n return sortDescFirst ? <ArrowUp size={14} /> : <ArrowDown size={14} />;\n if (state === \"desc\")\n return sortDescFirst ? <ArrowDown size={14} /> : <ArrowUp size={14} />;\n return <Minus size={14} />;\n}\n"],"mappings":"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","names":["i"]}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
var common_exports = {};
|
|
20
|
+
__export(common_exports, {
|
|
21
|
+
languageFromPath: () => languageFromPath
|
|
22
|
+
});
|
|
23
|
+
module.exports = __toCommonJS(common_exports);
|
|
24
|
+
const LANGUAGE_EXTENSIONS = {
|
|
25
|
+
yaml: [".yaml", ".yml"],
|
|
26
|
+
toml: [".toml"],
|
|
27
|
+
fancy_toml: [],
|
|
28
|
+
json: [".json"],
|
|
29
|
+
key_value: [".env", ".conf"],
|
|
30
|
+
ini: [".ini"],
|
|
31
|
+
string_list: [],
|
|
32
|
+
shell: [".sh", ".bash", ".zsh"],
|
|
33
|
+
dockerfile: ["Dockerfile"],
|
|
34
|
+
rust: [".rs"],
|
|
35
|
+
javascript: [".js", ".jsx", ".mjs", ".cjs"],
|
|
36
|
+
typescript: [".ts", ".tsx"]
|
|
37
|
+
};
|
|
38
|
+
function languageFromPath(path) {
|
|
39
|
+
for (const [lang, extensions] of Object.entries(LANGUAGE_EXTENSIONS)) {
|
|
40
|
+
for (const extension of extensions) {
|
|
41
|
+
if (path.endsWith(extension)) {
|
|
42
|
+
return lang;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
return void 0;
|
|
47
|
+
}
|
|
48
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
49
|
+
0 && (module.exports = {
|
|
50
|
+
languageFromPath
|
|
51
|
+
});
|
|
52
|
+
//# sourceMappingURL=common.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/monaco/common.ts"],"sourcesContent":["import { BoxProps } from \"@mantine/core\";\n\nexport type MonacoLanguage =\n | \"yaml\"\n | \"toml\"\n | \"fancy_toml\"\n | \"json\"\n | \"key_value\"\n | \"ini\"\n | \"string_list\"\n | \"shell\"\n | \"dockerfile\"\n | \"rust\"\n | \"javascript\"\n | \"typescript\";\n\nconst LANGUAGE_EXTENSIONS: Record<MonacoLanguage, string[]> = {\n yaml: [\".yaml\", \".yml\"],\n toml: [\".toml\"],\n fancy_toml: [],\n json: [\".json\"],\n key_value: [\".env\", \".conf\"],\n ini: [\".ini\"],\n string_list: [],\n shell: [\".sh\", \".bash\", \".zsh\"],\n dockerfile: [\"Dockerfile\"],\n rust: [\".rs\"],\n javascript: [\".js\", \".jsx\", \".mjs\", \".cjs\"],\n typescript: [\".ts\", \".tsx\"],\n};\n\nexport function languageFromPath(path: string) {\n for (const [lang, extensions] of Object.entries(LANGUAGE_EXTENSIONS)) {\n for (const extension of extensions) {\n if (path.endsWith(extension)) {\n return lang as MonacoLanguage;\n }\n }\n }\n return undefined;\n}\n\nexport interface MonacoEditorProps extends BoxProps {\n value: string | undefined;\n onValueChange?: (value: string) => void;\n language: MonacoLanguage | undefined;\n enableFancyToml?: boolean;\n filename?: string;\n readOnly?: boolean;\n minHeight?: number;\n /** Define max height as proportion of dimension height. Should be between 0 and 1. */\n maxHeightProportion?: number;\n maxHeight?: number;\n id?: string;\n}\n\nexport interface MonacoDiffEditorProps extends BoxProps {\n original: string | undefined;\n modified: string | undefined;\n onModifiedValueChange?: (value: string) => void;\n language: MonacoLanguage | undefined;\n enableFancyToml?: boolean;\n readOnly?: boolean;\n id?: string;\n hideUnchangedRegions?: boolean;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBA,MAAM,sBAAwD;AAAA,EAC5D,MAAM,CAAC,SAAS,MAAM;AAAA,EACtB,MAAM,CAAC,OAAO;AAAA,EACd,YAAY,CAAC;AAAA,EACb,MAAM,CAAC,OAAO;AAAA,EACd,WAAW,CAAC,QAAQ,OAAO;AAAA,EAC3B,KAAK,CAAC,MAAM;AAAA,EACZ,aAAa,CAAC;AAAA,EACd,OAAO,CAAC,OAAO,SAAS,MAAM;AAAA,EAC9B,YAAY,CAAC,YAAY;AAAA,EACzB,MAAM,CAAC,KAAK;AAAA,EACZ,YAAY,CAAC,OAAO,QAAQ,QAAQ,MAAM;AAAA,EAC1C,YAAY,CAAC,OAAO,MAAM;AAC5B;AAEO,SAAS,iBAAiB,MAAc;AAC7C,aAAW,CAAC,MAAM,UAAU,KAAK,OAAO,QAAQ,mBAAmB,GAAG;AACpE,eAAW,aAAa,YAAY;AAClC,UAAI,KAAK,SAAS,SAAS,GAAG;AAC5B,eAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;","names":[]}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { BoxProps } from "@mantine/core";
|
|
2
|
+
export type MonacoLanguage = "yaml" | "toml" | "fancy_toml" | "json" | "key_value" | "ini" | "string_list" | "shell" | "dockerfile" | "rust" | "javascript" | "typescript";
|
|
3
|
+
export declare function languageFromPath(path: string): MonacoLanguage | undefined;
|
|
4
|
+
export interface MonacoEditorProps extends BoxProps {
|
|
5
|
+
value: string | undefined;
|
|
6
|
+
onValueChange?: (value: string) => void;
|
|
7
|
+
language: MonacoLanguage | undefined;
|
|
8
|
+
enableFancyToml?: boolean;
|
|
9
|
+
filename?: string;
|
|
10
|
+
readOnly?: boolean;
|
|
11
|
+
minHeight?: number;
|
|
12
|
+
/** Define max height as proportion of dimension height. Should be between 0 and 1. */
|
|
13
|
+
maxHeightProportion?: number;
|
|
14
|
+
maxHeight?: number;
|
|
15
|
+
id?: string;
|
|
16
|
+
}
|
|
17
|
+
export interface MonacoDiffEditorProps extends BoxProps {
|
|
18
|
+
original: string | undefined;
|
|
19
|
+
modified: string | undefined;
|
|
20
|
+
onModifiedValueChange?: (value: string) => void;
|
|
21
|
+
language: MonacoLanguage | undefined;
|
|
22
|
+
enableFancyToml?: boolean;
|
|
23
|
+
readOnly?: boolean;
|
|
24
|
+
id?: string;
|
|
25
|
+
hideUnchangedRegions?: boolean;
|
|
26
|
+
}
|
|
27
|
+
//# sourceMappingURL=common.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../src/components/monaco/common.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,MAAM,MAAM,cAAc,GACtB,MAAM,GACN,MAAM,GACN,YAAY,GACZ,MAAM,GACN,WAAW,GACX,KAAK,GACL,aAAa,GACb,OAAO,GACP,YAAY,GACZ,MAAM,GACN,YAAY,GACZ,YAAY,CAAC;AAiBjB,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,8BAS5C;AAED,MAAM,WAAW,iBAAkB,SAAQ,QAAQ;IACjD,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,QAAQ,EAAE,cAAc,GAAG,SAAS,CAAC;IACrC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sFAAsF;IACtF,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,qBAAsB,SAAQ,QAAQ;IACrD,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,QAAQ,EAAE,cAAc,GAAG,SAAS,CAAC;IACrC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
const LANGUAGE_EXTENSIONS = {
|
|
2
|
+
yaml: [".yaml", ".yml"],
|
|
3
|
+
toml: [".toml"],
|
|
4
|
+
fancy_toml: [],
|
|
5
|
+
json: [".json"],
|
|
6
|
+
key_value: [".env", ".conf"],
|
|
7
|
+
ini: [".ini"],
|
|
8
|
+
string_list: [],
|
|
9
|
+
shell: [".sh", ".bash", ".zsh"],
|
|
10
|
+
dockerfile: ["Dockerfile"],
|
|
11
|
+
rust: [".rs"],
|
|
12
|
+
javascript: [".js", ".jsx", ".mjs", ".cjs"],
|
|
13
|
+
typescript: [".ts", ".tsx"]
|
|
14
|
+
};
|
|
15
|
+
function languageFromPath(path) {
|
|
16
|
+
for (const [lang, extensions] of Object.entries(LANGUAGE_EXTENSIONS)) {
|
|
17
|
+
for (const extension of extensions) {
|
|
18
|
+
if (path.endsWith(extension)) {
|
|
19
|
+
return lang;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
return void 0;
|
|
24
|
+
}
|
|
25
|
+
export {
|
|
26
|
+
languageFromPath
|
|
27
|
+
};
|
|
28
|
+
//# sourceMappingURL=common.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/monaco/common.ts"],"sourcesContent":["import { BoxProps } from \"@mantine/core\";\n\nexport type MonacoLanguage =\n | \"yaml\"\n | \"toml\"\n | \"fancy_toml\"\n | \"json\"\n | \"key_value\"\n | \"ini\"\n | \"string_list\"\n | \"shell\"\n | \"dockerfile\"\n | \"rust\"\n | \"javascript\"\n | \"typescript\";\n\nconst LANGUAGE_EXTENSIONS: Record<MonacoLanguage, string[]> = {\n yaml: [\".yaml\", \".yml\"],\n toml: [\".toml\"],\n fancy_toml: [],\n json: [\".json\"],\n key_value: [\".env\", \".conf\"],\n ini: [\".ini\"],\n string_list: [],\n shell: [\".sh\", \".bash\", \".zsh\"],\n dockerfile: [\"Dockerfile\"],\n rust: [\".rs\"],\n javascript: [\".js\", \".jsx\", \".mjs\", \".cjs\"],\n typescript: [\".ts\", \".tsx\"],\n};\n\nexport function languageFromPath(path: string) {\n for (const [lang, extensions] of Object.entries(LANGUAGE_EXTENSIONS)) {\n for (const extension of extensions) {\n if (path.endsWith(extension)) {\n return lang as MonacoLanguage;\n }\n }\n }\n return undefined;\n}\n\nexport interface MonacoEditorProps extends BoxProps {\n value: string | undefined;\n onValueChange?: (value: string) => void;\n language: MonacoLanguage | undefined;\n enableFancyToml?: boolean;\n filename?: string;\n readOnly?: boolean;\n minHeight?: number;\n /** Define max height as proportion of dimension height. Should be between 0 and 1. */\n maxHeightProportion?: number;\n maxHeight?: number;\n id?: string;\n}\n\nexport interface MonacoDiffEditorProps extends BoxProps {\n original: string | undefined;\n modified: string | undefined;\n onModifiedValueChange?: (value: string) => void;\n language: MonacoLanguage | undefined;\n enableFancyToml?: boolean;\n readOnly?: boolean;\n id?: string;\n hideUnchangedRegions?: boolean;\n}\n"],"mappings":"AAgBA,MAAM,sBAAwD;AAAA,EAC5D,MAAM,CAAC,SAAS,MAAM;AAAA,EACtB,MAAM,CAAC,OAAO;AAAA,EACd,YAAY,CAAC;AAAA,EACb,MAAM,CAAC,OAAO;AAAA,EACd,WAAW,CAAC,QAAQ,OAAO;AAAA,EAC3B,KAAK,CAAC,MAAM;AAAA,EACZ,aAAa,CAAC;AAAA,EACd,OAAO,CAAC,OAAO,SAAS,MAAM;AAAA,EAC9B,YAAY,CAAC,YAAY;AAAA,EACzB,MAAM,CAAC,KAAK;AAAA,EACZ,YAAY,CAAC,OAAO,QAAQ,QAAQ,MAAM;AAAA,EAC1C,YAAY,CAAC,OAAO,MAAM;AAC5B;AAEO,SAAS,iBAAiB,MAAc;AAC7C,aAAW,CAAC,MAAM,UAAU,KAAK,OAAO,QAAQ,mBAAmB,GAAG;AACpE,eAAW,aAAa,YAAY;AAClC,UAAI,KAAK,SAAS,SAAS,GAAG;AAC5B,eAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;","names":[]}
|