@jakubmazanec/ui 0.4.2 → 0.5.0-unstable.5f3ffbeb
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/build/components/Button.js +8 -5
- package/build/components/Button.js.map +2 -2
- package/build/components/Checkbox.js +2 -2
- package/build/components/Checkbox.js.map +1 -1
- package/build/components/Combobox.js +1 -1
- package/build/components/Combobox.js.map +1 -1
- package/build/components/DialogPanel.js +1 -1
- package/build/components/DialogPanel.js.map +1 -1
- package/build/components/DialogTitle.js +1 -1
- package/build/components/DialogTitle.js.map +1 -1
- package/build/components/Heading.d.ts +21 -0
- package/build/components/Heading.js +48 -0
- package/build/components/Heading.js.map +7 -0
- package/build/components/Icon.js +1 -1
- package/build/components/Icon.js.map +1 -1
- package/build/components/Input.js +4 -4
- package/build/components/Input.js.map +2 -2
- package/build/components/Legend.js +1 -1
- package/build/components/Legend.js.map +1 -1
- package/build/components/ListboxOption.js +1 -1
- package/build/components/ListboxOption.js.map +1 -1
- package/build/components/Spinner.js +1 -1
- package/build/components/Spinner.js.map +1 -1
- package/build/components/TableHead.js +1 -1
- package/build/components/TableHead.js.map +1 -1
- package/build/components/TableHeader.js +1 -1
- package/build/components/TableHeader.js.map +2 -2
- package/build/components/Textarea.js +2 -2
- package/build/components/Textarea.js.map +1 -1
- package/build/components/data-table/DataTable.d.ts +2 -1
- package/build/components/data-table/DataTable.js +115 -110
- package/build/components/data-table/DataTable.js.map +2 -2
- package/build/components/data-table/internals/DataTableFilter.d.ts +12 -0
- package/build/components/data-table/internals/DataTableFilter.js +275 -0
- package/build/components/data-table/internals/DataTableFilter.js.map +7 -0
- package/build/components/data-table/internals/DataTableFilters.d.ts +11 -0
- package/build/components/data-table/internals/DataTableFilters.js +40 -0
- package/build/components/data-table/internals/DataTableFilters.js.map +7 -0
- package/build/components/data-table/internals/DataTableHeader.d.ts +2 -11
- package/build/components/data-table/internals/DataTableHeader.js +18 -112
- package/build/components/data-table/internals/DataTableHeader.js.map +2 -2
- package/build/components/data-table/internals/DataTableMenu.d.ts +11 -0
- package/build/components/data-table/internals/DataTableMenu.js +35 -0
- package/build/components/data-table/internals/DataTableMenu.js.map +7 -0
- package/build/components/data-table/internals/DataTableRow.d.ts +6 -0
- package/build/components/data-table/internals/DataTableRow.js +26 -0
- package/build/components/data-table/internals/DataTableRow.js.map +7 -0
- package/build/components/data-table/internals/DataTableSetting.d.ts +10 -0
- package/build/components/data-table/internals/DataTableSetting.js +111 -0
- package/build/components/data-table/internals/DataTableSetting.js.map +7 -0
- package/build/components/data-table/internals/DataTableSettings.d.ts +9 -0
- package/build/components/data-table/internals/DataTableSettings.js +71 -0
- package/build/components/data-table/internals/DataTableSettings.js.map +7 -0
- package/build/components/data-table/internals/constants.d.ts +1 -1
- package/build/components/data-table/internals/constants.js +1 -1
- package/build/components/data-table/internals/constants.js.map +2 -2
- package/build/components/data-table/internals.d.ts +5 -0
- package/build/components/data-table/internals.js +5 -0
- package/build/components/data-table/internals.js.map +2 -2
- package/build/components.d.ts +1 -0
- package/build/components.js +1 -0
- package/build/components.js.map +2 -2
- package/build/development/createTailwindConfig.d.ts +79 -2
- package/build/development/createTailwindConfig.js +10 -55
- package/build/development/createTailwindConfig.js.map +2 -2
- package/build/development/internals/createTailwindThemeColors.d.ts +2 -0
- package/build/development/internals/createTailwindThemeColors.js +51 -0
- package/build/development/internals/createTailwindThemeColors.js.map +7 -0
- package/build/development/internals.d.ts +1 -0
- package/build/development/internals.js +1 -0
- package/build/development/internals.js.map +2 -2
- package/build/styles.css +15 -1
- package/build/styles.css.map +2 -2
- package/build/theme/Theme.d.ts +3 -0
- package/build/theme/defaultTheme.js +2 -0
- package/build/theme/defaultTheme.js.map +2 -2
- package/build/theme/internals/themeContext.d.ts +10 -0
- package/build/theme/internals/useTheme.d.ts +10 -0
- package/package.json +1 -1
- package/source/components/Button.tsx +12 -5
- package/source/components/Checkbox.tsx +2 -2
- package/source/components/Combobox.tsx +1 -1
- package/source/components/DialogPanel.tsx +1 -1
- package/source/components/DialogTitle.tsx +1 -1
- package/source/components/Heading.ts +69 -0
- package/source/components/Icon.tsx +1 -1
- package/source/components/Input.tsx +5 -5
- package/source/components/Legend.tsx +1 -1
- package/source/components/ListboxOption.tsx +1 -1
- package/source/components/Spinner.tsx +1 -1
- package/source/components/TableHead.ts +1 -1
- package/source/components/TableHeader.ts +2 -1
- package/source/components/Textarea.tsx +2 -2
- package/source/components/data-table/DataTable.tsx +154 -136
- package/source/components/data-table/internals/DataTableFilter.tsx +354 -0
- package/source/components/data-table/internals/DataTableFilters.tsx +56 -0
- package/source/components/data-table/internals/DataTableHeader.tsx +7 -145
- package/source/components/data-table/internals/DataTableMenu.tsx +62 -0
- package/source/components/data-table/internals/DataTableRow.tsx +38 -0
- package/source/components/data-table/internals/DataTableSetting.tsx +142 -0
- package/source/components/data-table/internals/DataTableSettings.tsx +91 -0
- package/source/components/data-table/internals/constants.ts +1 -1
- package/source/components/data-table/internals.ts +5 -0
- package/source/components.ts +1 -0
- package/source/development/createTailwindConfig.ts +11 -57
- package/source/development/internals/createTailwindThemeColors.ts +53 -0
- package/source/development/internals.ts +1 -0
- package/source/styles.css +19 -3
- package/source/theme/Theme.ts +2 -0
- package/source/theme/defaultTheme.ts +2 -0
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../source/components/Textarea.tsx"],
|
|
4
|
-
"sourcesContent": ["import {getTextareaProps} from '@conform-to/react';\nimport {Textarea as HeadlessTextarea} from '@headlessui/react';\nimport {type ComponentPropsWithoutRef, type ComponentType, type ElementType} from 'react';\n\nimport {\n type ComponentProps,\n type ComponentTheme,\n createComponentTheme,\n} from '../theme/internals.js';\nimport {type ComponentRef} from './ComponentRef.js';\nimport {useField} from './useField.js';\nimport {useFieldName} from './useFieldName.js';\n\nexport const useTextareaTheme = createComponentTheme('Textarea', {\n variants: {\n disabled: [true, false],\n },\n elements: ['root', 'textarea', 'icon'],\n});\n\nconst TEXTAREA_ELEMENT = 'textarea';\n\nexport type TextareaProps<T extends ElementType> = ComponentProps<typeof useTextareaTheme> &\n ComponentPropsWithoutRef<T> &\n ComponentRef<T> & {\n as?: T | undefined;\n name?: string | undefined;\n className?: string | undefined;\n icon?: ComponentType<object> | undefined;\n };\n\nexport function Textarea<T extends ElementType = typeof TEXTAREA_ELEMENT>({\n disabled = false,\n as = TEXTAREA_ELEMENT as T,\n name,\n className,\n icon: Icon,\n ref,\n ...rest\n}: TextareaProps<T>) {\n let theme = useTextareaTheme({disabled});\n let fieldName = useFieldName();\n let field = useField();\n\n let rootProps: Record<string, unknown> = {\n className: theme.root('relative', className),\n 'data-component': 'textarea',\n };\n let textareaProps: Record<string, unknown> = {\n ref,\n disabled,\n name: field?.name ?? fieldName ?? name,\n className: theme.textarea(null, className),\n ...rest,\n };\n let iconProps: Record<string, unknown> = {\n className: theme.icon('absolute'),\n };\n\n if (Icon) {\n rootProps['data-icon'] = '';\n }\n\n if (field) {\n let {key, ...restProps} = getTextareaProps(field);\n\n textareaProps = {...restProps, ...textareaProps};\n }\n\n return (\n <span {...rootProps}>\n <HeadlessTextarea {...textareaProps} />\n {Icon ?\n <Icon {...iconProps} />\n : null}\n </span>\n );\n}\n\nexport const textareaTheme: ComponentTheme<typeof useTextareaTheme> = {\n classNames: {\n root: 'group flex w-full items-center rounded border-2 border-neutral-100 hover:border-neutral-200 py-2 px-2.5 min-h-19 bg-white shadow-inner transition-colors',\n textarea:\n 'min-h-15 p-0 focus
|
|
4
|
+
"sourcesContent": ["import {getTextareaProps} from '@conform-to/react';\nimport {Textarea as HeadlessTextarea} from '@headlessui/react';\nimport {type ComponentPropsWithoutRef, type ComponentType, type ElementType} from 'react';\n\nimport {\n type ComponentProps,\n type ComponentTheme,\n createComponentTheme,\n} from '../theme/internals.js';\nimport {type ComponentRef} from './ComponentRef.js';\nimport {useField} from './useField.js';\nimport {useFieldName} from './useFieldName.js';\n\nexport const useTextareaTheme = createComponentTheme('Textarea', {\n variants: {\n disabled: [true, false],\n },\n elements: ['root', 'textarea', 'icon'],\n});\n\nconst TEXTAREA_ELEMENT = 'textarea';\n\nexport type TextareaProps<T extends ElementType> = ComponentProps<typeof useTextareaTheme> &\n ComponentPropsWithoutRef<T> &\n ComponentRef<T> & {\n as?: T | undefined;\n name?: string | undefined;\n className?: string | undefined;\n icon?: ComponentType<object> | undefined;\n };\n\nexport function Textarea<T extends ElementType = typeof TEXTAREA_ELEMENT>({\n disabled = false,\n as = TEXTAREA_ELEMENT as T,\n name,\n className,\n icon: Icon,\n ref,\n ...rest\n}: TextareaProps<T>) {\n let theme = useTextareaTheme({disabled});\n let fieldName = useFieldName();\n let field = useField();\n\n let rootProps: Record<string, unknown> = {\n className: theme.root('relative', className),\n 'data-component': 'textarea',\n };\n let textareaProps: Record<string, unknown> = {\n ref,\n disabled,\n name: field?.name ?? fieldName ?? name,\n className: theme.textarea(null, className),\n ...rest,\n };\n let iconProps: Record<string, unknown> = {\n className: theme.icon('absolute'),\n };\n\n if (Icon) {\n rootProps['data-icon'] = '';\n }\n\n if (field) {\n let {key, ...restProps} = getTextareaProps(field);\n\n textareaProps = {...restProps, ...textareaProps};\n }\n\n return (\n <span {...rootProps}>\n <HeadlessTextarea {...textareaProps} />\n {Icon ?\n <Icon {...iconProps} />\n : null}\n </span>\n );\n}\n\nexport const textareaTheme: ComponentTheme<typeof useTextareaTheme> = {\n classNames: {\n root: 'group flex w-full items-center rounded border-2 border-neutral-100 hover:border-neutral-200 py-2 px-2.5 min-h-19 bg-white shadow-inner transition-colors focus-within:outline-solid focus-within:outline-2 focus-within:outline-blue-400/50 focus-within:outline-offset-[calc(var(--spacing)*0.5)]',\n textarea:\n 'min-h-15 p-0 focus:outline-none w-full group-data-[icon]:pl-6 bg-transparent font-sans text-sm',\n icon: 'size-6 left-[0.3125rem] top-[0.3125rem] text-neutral-300',\n },\n variants: {\n disabled: {\n true: {\n root: 'border-neutral-100 text-neutral-200 cursor-not-allowed',\n textarea: '',\n icon: '',\n },\n false: {\n root: '',\n textarea: '',\n icon: '',\n },\n },\n },\n};\n"],
|
|
5
5
|
"mappings": ";AAsEI,SACE,KADF;AAtEJ,SAAQ,wBAAuB;AAC/B,SAAQ,YAAY,wBAAuB;AAG3C;AAAA,EAGE;AAAA,OACK;AAEP,SAAQ,gBAAe;AACvB,SAAQ,oBAAmB;AAEpB,aAAM,mBAAmB,qBAAqB,YAAY;AAAA,EAC/D,UAAU;AAAA,IACR,UAAU,CAAC,MAAM,KAAK;AAAA,EACxB;AAAA,EACA,UAAU,CAAC,QAAQ,YAAY,MAAM;AACvC,CAAC;AAED,MAAM,mBAAmB;AAWlB,gBAAS,SAA0D;AAAA,EACxE,WAAW;AAAA,EACX,KAAK;AAAA,EACL;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA,GAAG;AACL,GAAqB;AACnB,MAAI,QAAQ,iBAAiB,EAAC,SAAQ,CAAC;AACvC,MAAI,YAAY,aAAa;AAC7B,MAAI,QAAQ,SAAS;AAErB,MAAI,YAAqC;AAAA,IACvC,WAAW,MAAM,KAAK,YAAY,SAAS;AAAA,IAC3C,kBAAkB;AAAA,EACpB;AACA,MAAI,gBAAyC;AAAA,IAC3C;AAAA,IACA;AAAA,IACA,MAAM,OAAO,QAAQ,aAAa;AAAA,IAClC,WAAW,MAAM,SAAS,MAAM,SAAS;AAAA,IACzC,GAAG;AAAA,EACL;AACA,MAAI,YAAqC;AAAA,IACvC,WAAW,MAAM,KAAK,UAAU;AAAA,EAClC;AAEA,MAAI,MAAM;AACR,cAAU,WAAW,IAAI;AAAA,EAC3B;AAEA,MAAI,OAAO;AACT,QAAI,EAAC,KAAK,GAAG,UAAS,IAAI,iBAAiB,KAAK;AAEhD,oBAAgB,EAAC,GAAG,WAAW,GAAG,cAAa;AAAA,EACjD;AAEA,SACE,qBAAC,UAAM,GAAG,WACR;AAAA,wBAAC,oBAAkB,GAAG,eAAe;AAAA,IACpC,OACC,oBAAC,QAAM,GAAG,WAAW,IACrB;AAAA,KACJ;AAEJ;AAEO,aAAM,gBAAyD;AAAA,EACpE,YAAY;AAAA,IACV,MAAM;AAAA,IACN,UACE;AAAA,IACF,MAAM;AAAA,EACR;AAAA,EACA,UAAU;AAAA,IACR,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,MAAM;AAAA,QACN,UAAU;AAAA,QACV,MAAM;AAAA,MACR;AAAA,MACA,OAAO;AAAA,QACL,MAAM;AAAA,QACN,UAAU;AAAA,QACV,MAAM;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -43,5 +43,6 @@ export type DataTableProps<D, C> = {
|
|
|
43
43
|
hideSearch?: boolean | undefined;
|
|
44
44
|
search?: DataTableSearch | undefined;
|
|
45
45
|
onSearchChange?: ((search: DataTableSearch) => void) | undefined;
|
|
46
|
+
showRowSummaryOnClick?: boolean | undefined;
|
|
46
47
|
};
|
|
47
|
-
export declare function DataTable<D extends RowData, C extends Array<ColumnDef<D, any>>>({ data, columns, clientPagination, hidePagination, pagination: controlledPagination, onPaginationChange, clientSorting, sorting: controlledSorting, hideSorting, onSortingChange, columnVisibility: controlledColumnVisibility, hideColumnVisibility, onColumnVisibilityChange, columnOrder: controlledColumnOrder, hideColumnOrder, onColumnOrderChange, columnPinning: controlledColumnPinning, hideColumnPinning, onColumnPinningChange, hideColumnResizing, clientFilters, hideFilters, filters: controlledFilters, onFiltersChange, clientFaceting, faceting, clientSearch, hideSearch, search: controlledSearch, onSearchChange, }: DataTableProps<D, C>): import("react/jsx-runtime").JSX.Element;
|
|
48
|
+
export declare function DataTable<D extends RowData, C extends Array<ColumnDef<D, any>>>({ data, columns, clientPagination, hidePagination, pagination: controlledPagination, onPaginationChange, clientSorting, sorting: controlledSorting, hideSorting, onSortingChange, columnVisibility: controlledColumnVisibility, hideColumnVisibility, onColumnVisibilityChange, columnOrder: controlledColumnOrder, hideColumnOrder, onColumnOrderChange, columnPinning: controlledColumnPinning, hideColumnPinning, onColumnPinningChange, hideColumnResizing, clientFilters, hideFilters, filters: controlledFilters, onFiltersChange, clientFaceting, faceting, clientSearch, hideSearch, search: controlledSearch, onSearchChange, showRowSummaryOnClick, }: DataTableProps<D, C>): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,16 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
-
import {
|
|
4
|
-
closestCenter,
|
|
5
|
-
DndContext,
|
|
6
|
-
KeyboardSensor,
|
|
7
|
-
MouseSensor,
|
|
8
|
-
TouchSensor,
|
|
9
|
-
useSensor,
|
|
10
|
-
useSensors
|
|
11
|
-
} from "@dnd-kit/core";
|
|
12
|
-
import { restrictToHorizontalAxis } from "@dnd-kit/modifiers";
|
|
13
|
-
import { arrayMove, horizontalListSortingStrategy, SortableContext } from "@dnd-kit/sortable";
|
|
3
|
+
import { horizontalListSortingStrategy, SortableContext } from "@dnd-kit/sortable";
|
|
14
4
|
import {
|
|
15
5
|
flexRender,
|
|
16
6
|
getCoreRowModel,
|
|
@@ -22,7 +12,11 @@ import {
|
|
|
22
12
|
getSortedRowModel,
|
|
23
13
|
useReactTable
|
|
24
14
|
} from "@tanstack/react-table";
|
|
25
|
-
import { useCallback,
|
|
15
|
+
import { useCallback, useState } from "react";
|
|
16
|
+
import { Button } from "../Button.js";
|
|
17
|
+
import { Dialog } from "../Dialog.js";
|
|
18
|
+
import { DialogPanel } from "../DialogPanel.js";
|
|
19
|
+
import { DialogTitle } from "../DialogTitle.js";
|
|
26
20
|
import { Table } from "../Table.js";
|
|
27
21
|
import { TableBody } from "../TableBody.js";
|
|
28
22
|
import { TableCell } from "../TableCell.js";
|
|
@@ -31,15 +25,16 @@ import { TableHead } from "../TableHead.js";
|
|
|
31
25
|
import { TableHeader } from "../TableHeader.js";
|
|
32
26
|
import { TableRow } from "../TableRow.js";
|
|
33
27
|
import {
|
|
28
|
+
DataTableFilters as DataTableFiltersComponent,
|
|
34
29
|
DataTableHeader,
|
|
30
|
+
DataTableMenu,
|
|
35
31
|
DataTablePagination as DataTablePaginationComponent,
|
|
36
32
|
DataTableSearch as DataTableSearchComponent,
|
|
37
33
|
DEFAULT_PAGE_SIZE,
|
|
38
34
|
fromPinningState,
|
|
39
|
-
fuzzyFilter
|
|
40
|
-
getCommonPinningClasses,
|
|
41
|
-
getCommonPinningStyles
|
|
35
|
+
fuzzyFilter
|
|
42
36
|
} from "./internals.js";
|
|
37
|
+
import { DataTableRow } from "./internals/DataTableRow.js";
|
|
43
38
|
export function DataTable({
|
|
44
39
|
data,
|
|
45
40
|
columns,
|
|
@@ -70,7 +65,8 @@ export function DataTable({
|
|
|
70
65
|
clientSearch = false,
|
|
71
66
|
hideSearch = false,
|
|
72
67
|
search: controlledSearch,
|
|
73
|
-
onSearchChange
|
|
68
|
+
onSearchChange,
|
|
69
|
+
showRowSummaryOnClick = false
|
|
74
70
|
}) {
|
|
75
71
|
let [pagination, setPagination] = useState(
|
|
76
72
|
controlledPagination ? {
|
|
@@ -118,7 +114,10 @@ export function DataTable({
|
|
|
118
114
|
);
|
|
119
115
|
let [sorting, setSorting] = useState([]);
|
|
120
116
|
let [columnFilters, setColumnFilters] = useState([]);
|
|
117
|
+
let [showFilters, setShowFilters] = useState(true);
|
|
121
118
|
let [search, setSearch] = useState("");
|
|
119
|
+
let [isRowDialogOpen, setIsRowDialogOpen] = useState(false);
|
|
120
|
+
let [rowDialogRow, setRowDialogRow] = useState(null);
|
|
122
121
|
let handleColumnVisibilityChange = useCallback(
|
|
123
122
|
(columnVisibilityState) => {
|
|
124
123
|
setColumnVisibility(columnVisibilityState);
|
|
@@ -181,111 +180,117 @@ export function DataTable({
|
|
|
181
180
|
columnResizeMode: "onChange",
|
|
182
181
|
globalFilterFn: fuzzyFilter
|
|
183
182
|
});
|
|
184
|
-
let handleDragEnd = useCallback(
|
|
185
|
-
({ active, over }) => {
|
|
186
|
-
if (over && active.id !== over.id) {
|
|
187
|
-
table.setColumnOrder((previousColumnOrder) => {
|
|
188
|
-
let oldIndex = previousColumnOrder.indexOf(active.id);
|
|
189
|
-
let newIndex = previousColumnOrder.indexOf(over.id);
|
|
190
|
-
return arrayMove(previousColumnOrder, oldIndex, newIndex);
|
|
191
|
-
});
|
|
192
|
-
}
|
|
193
|
-
},
|
|
194
|
-
[table]
|
|
195
|
-
);
|
|
196
|
-
let sensors = useSensors(
|
|
197
|
-
useSensor(MouseSensor, {
|
|
198
|
-
activationConstraint: {
|
|
199
|
-
distance: 5
|
|
200
|
-
}
|
|
201
|
-
}),
|
|
202
|
-
useSensor(TouchSensor, {
|
|
203
|
-
activationConstraint: {
|
|
204
|
-
distance: 5
|
|
205
|
-
}
|
|
206
|
-
}),
|
|
207
|
-
useSensor(KeyboardSensor, {})
|
|
208
|
-
);
|
|
209
|
-
let id = useId();
|
|
210
183
|
let page = clientPagination ? table.getState().pagination.pageIndex + 1 : controlledPagination?.page ?? 1;
|
|
211
184
|
let pageSize = clientPagination ? table.getState().pagination.pageSize : controlledPagination?.pageSize ?? DEFAULT_PAGE_SIZE;
|
|
212
185
|
let pageCount = clientPagination ? table.getPageCount() : controlledPagination?.pageCount ?? 1;
|
|
186
|
+
let toggleFilters = useCallback(() => {
|
|
187
|
+
setShowFilters((value) => !value);
|
|
188
|
+
}, []);
|
|
189
|
+
let handleRowClick = useCallback((row) => {
|
|
190
|
+
setRowDialogRow(row);
|
|
191
|
+
setIsRowDialogOpen(true);
|
|
192
|
+
}, []);
|
|
193
|
+
let handleCloseRowDialog = useCallback(() => {
|
|
194
|
+
setIsRowDialogOpen(false);
|
|
195
|
+
}, []);
|
|
213
196
|
return /* @__PURE__ */ jsxs(
|
|
214
|
-
|
|
197
|
+
"div",
|
|
215
198
|
{
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
modifiers: [restrictToHorizontalAxis],
|
|
219
|
-
sensors,
|
|
220
|
-
onDragEnd: handleDragEnd,
|
|
199
|
+
className: "group/table relative flex w-full gap-4",
|
|
200
|
+
"data-show-filters": showFilters || void 0,
|
|
221
201
|
children: [
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
table,
|
|
256
|
-
onFiltering: onFiltersChange,
|
|
257
|
-
onSorting: onSortingChange
|
|
258
|
-
},
|
|
259
|
-
header.id
|
|
260
|
-
)) }) }, headerGroup.id)) }),
|
|
261
|
-
/* @__PURE__ */ jsx(TableBody, { children: table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(TableRow, { children: row.getVisibleCells().map((cell) => {
|
|
262
|
-
let value = cell.getValue();
|
|
263
|
-
return /* @__PURE__ */ jsx(
|
|
264
|
-
TableCell,
|
|
202
|
+
/* @__PURE__ */ jsxs("div", { className: "flex w-[calc(80%-var(--spacing)*4)] grow flex-col gap-4", children: [
|
|
203
|
+
/* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-2", children: [
|
|
204
|
+
hideSearch ? null : /* @__PURE__ */ jsx(
|
|
205
|
+
DataTableSearchComponent,
|
|
206
|
+
{
|
|
207
|
+
clientSearch,
|
|
208
|
+
search: controlledSearch,
|
|
209
|
+
table,
|
|
210
|
+
onSearch: onSearchChange
|
|
211
|
+
}
|
|
212
|
+
),
|
|
213
|
+
hideColumnOrder && hideColumnPinning && hideColumnVisibility && hideFilters ? null : /* @__PURE__ */ jsx(
|
|
214
|
+
DataTableMenu,
|
|
215
|
+
{
|
|
216
|
+
hideColumnOrder,
|
|
217
|
+
hideColumnPinning,
|
|
218
|
+
hideColumnVisibility,
|
|
219
|
+
hideFilters,
|
|
220
|
+
table,
|
|
221
|
+
toggleFilters
|
|
222
|
+
}
|
|
223
|
+
)
|
|
224
|
+
] }),
|
|
225
|
+
/* @__PURE__ */ jsx("div", { className: "w-full overflow-x-scroll overflow-y-visible [scrollbar-width:thin]", children: /* @__PURE__ */ jsxs(
|
|
226
|
+
Table,
|
|
227
|
+
{
|
|
228
|
+
style: {
|
|
229
|
+
width: table.getCenterTotalSize(),
|
|
230
|
+
tableLayout: "fixed"
|
|
231
|
+
},
|
|
232
|
+
children: [
|
|
233
|
+
/* @__PURE__ */ jsx(TableHead, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(SortableContext, { items: columnOrder, strategy: horizontalListSortingStrategy, children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(
|
|
234
|
+
DataTableHeader,
|
|
265
235
|
{
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
236
|
+
clientSorting,
|
|
237
|
+
header,
|
|
238
|
+
hideColumnOrder,
|
|
239
|
+
hideColumnResizing,
|
|
240
|
+
hideSorting,
|
|
241
|
+
sorting: controlledSorting,
|
|
242
|
+
onSorting: onSortingChange
|
|
270
243
|
},
|
|
271
|
-
|
|
272
|
-
)
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
244
|
+
header.id
|
|
245
|
+
)) }) }, headerGroup.id)) }),
|
|
246
|
+
/* @__PURE__ */ jsx(TableBody, { children: table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(
|
|
247
|
+
DataTableRow,
|
|
248
|
+
{
|
|
249
|
+
row,
|
|
250
|
+
onClick: showRowSummaryOnClick ? handleRowClick : void 0
|
|
251
|
+
},
|
|
252
|
+
row.id
|
|
253
|
+
)) }),
|
|
254
|
+
/* @__PURE__ */ jsx(TableFoot, { children: table.getFooterGroups().map((footerGroup) => /* @__PURE__ */ jsx(TableRow, { children: footerGroup.headers.map((header) => /* @__PURE__ */ jsx(TableHeader, { children: header.isPlaceholder ? null : flexRender(header.column.columnDef.footer, header.getContext()) }, header.id)) }, footerGroup.id)) })
|
|
255
|
+
]
|
|
256
|
+
}
|
|
257
|
+
) }),
|
|
258
|
+
hidePagination ? null : /* @__PURE__ */ jsx(
|
|
259
|
+
DataTablePaginationComponent,
|
|
260
|
+
{
|
|
261
|
+
clientPagination,
|
|
262
|
+
page,
|
|
263
|
+
pageCount,
|
|
264
|
+
pageSize,
|
|
265
|
+
table,
|
|
266
|
+
onPagination: onPaginationChange
|
|
267
|
+
}
|
|
268
|
+
)
|
|
269
|
+
] }),
|
|
270
|
+
hideFilters ? null : /* @__PURE__ */ jsx(
|
|
271
|
+
DataTableFiltersComponent,
|
|
280
272
|
{
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
273
|
+
clientFaceting,
|
|
274
|
+
clientFilters,
|
|
275
|
+
faceting,
|
|
276
|
+
filters: controlledFilters,
|
|
285
277
|
table,
|
|
286
|
-
|
|
278
|
+
onFiltering: onFiltersChange
|
|
287
279
|
}
|
|
288
|
-
)
|
|
280
|
+
),
|
|
281
|
+
showRowSummaryOnClick ? /* @__PURE__ */ jsx(Dialog, { open: isRowDialogOpen, onClose: handleCloseRowDialog, children: /* @__PURE__ */ jsxs(DialogPanel, { className: "flex flex-col gap-4", children: [
|
|
282
|
+
/* @__PURE__ */ jsx(DialogTitle, { children: `#${(rowDialogRow?.index ?? 0) + 1}` }),
|
|
283
|
+
/* @__PURE__ */ jsx("div", { className: "max-h-[60vh] overflow-auto", children: rowDialogRow ? /* @__PURE__ */ jsx(Table, { className: "w-full", children: /* @__PURE__ */ jsx(TableBody, { children: rowDialogRow.getVisibleCells().map((cell) => /* @__PURE__ */ jsxs(TableRow, { children: [
|
|
284
|
+
/* @__PURE__ */ jsx(TableHeader, { className: "w-[16rem]", children: flexRender(cell.column.columnDef.header, {
|
|
285
|
+
table,
|
|
286
|
+
column: cell.column,
|
|
287
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/consistent-type-assertions -- needed
|
|
288
|
+
header: { column: cell.column }
|
|
289
|
+
}) }),
|
|
290
|
+
/* @__PURE__ */ jsx(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) })
|
|
291
|
+
] }, cell.id)) }) }) : null }),
|
|
292
|
+
/* @__PURE__ */ jsx(Button, { className: "self-center", onClick: handleCloseRowDialog, children: "Close" })
|
|
293
|
+
] }) }) : null
|
|
289
294
|
]
|
|
290
295
|
}
|
|
291
296
|
);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../source/components/data-table/DataTable.tsx"],
|
|
4
|
-
"sourcesContent": ["import {\n closestCenter,\n DndContext,\n type DragEndEvent,\n KeyboardSensor,\n MouseSensor,\n TouchSensor,\n useSensor,\n useSensors,\n} from '@dnd-kit/core';\nimport {restrictToHorizontalAxis} from '@dnd-kit/modifiers';\nimport {arrayMove, horizontalListSortingStrategy, SortableContext} from '@dnd-kit/sortable';\nimport {\n type ColumnDef,\n type ColumnFiltersState,\n type ColumnOrderState,\n type ColumnPinningState,\n flexRender,\n getCoreRowModel,\n getFacetedMinMaxValues,\n getFacetedRowModel,\n getFacetedUniqueValues,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n type PaginationState,\n type RowData,\n type SortingState,\n type Updater,\n useReactTable,\n type VisibilityState,\n} from '@tanstack/react-table';\nimport {useCallback, useId, useState} from 'react';\n\nimport {Table} from '../Table.js';\nimport {TableBody} from '../TableBody.js';\nimport {TableCell} from '../TableCell.js';\nimport {TableFoot} from '../TableFoot.js';\nimport {TableHead} from '../TableHead.js';\nimport {TableHeader} from '../TableHeader.js';\nimport {TableRow} from '../TableRow.js';\nimport {type DataTableColumnOrder} from './DataTableColumnOrder.js';\nimport {type DataTableColumnPinning} from './DataTableColumnPinning.js';\nimport {type DataTableColumnVisibility} from './DataTableColumnVisibility.js';\nimport {type DataTableFaceting} from './DataTableFaceting.js';\nimport {type DataTableFilters} from './DataTableFilters.js';\nimport {type DataTablePagination} from './DataTablePagination.js';\nimport {type DataTableSearch} from './DataTableSearch.js';\nimport {type DataTableSorting} from './DataTableSorting.js';\nimport {\n DataTableHeader,\n DataTablePagination as DataTablePaginationComponent,\n DataTableSearch as DataTableSearchComponent,\n DEFAULT_PAGE_SIZE,\n fromPinningState,\n fuzzyFilter,\n getCommonPinningClasses,\n getCommonPinningStyles,\n} from './internals.js';\n\ndeclare module '@tanstack/react-table' {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars -- false positive\n interface ColumnMeta<TData extends RowData, TValue> {\n filterVariant?: 'range' | 'select' | 'text';\n }\n}\n\nexport type DataTableProps<D, C> = {\n data: D[];\n columns: C;\n clientPagination?: boolean | undefined;\n hidePagination?: boolean | undefined;\n pagination?: DataTablePagination | undefined;\n onPaginationChange?:\n | ((\n pagination: Pick<DataTablePagination, 'page'> | Pick<DataTablePagination, 'pageSize'>,\n ) => void)\n | undefined;\n columnVisibility?: DataTableColumnVisibility;\n hideColumnVisibility?: boolean | undefined;\n onColumnVisibilityChange?: ((columnVisibility: DataTableColumnVisibility) => void) | undefined;\n columnOrder?: DataTableColumnOrder;\n hideColumnOrder?: boolean | undefined;\n onColumnOrderChange?: ((columnOrder: DataTableColumnOrder) => void) | undefined;\n columnPinning?: DataTableColumnPinning;\n hideColumnPinning?: boolean | undefined;\n onColumnPinningChange?: ((columnPinning: DataTableColumnPinning) => void) | undefined;\n hideColumnResizing?: boolean | undefined;\n clientSorting?: boolean | undefined;\n sorting?: DataTableSorting | undefined;\n hideSorting?: boolean | undefined;\n onSortingChange?: ((sorting: DataTableSorting) => void) | undefined;\n clientFilters?: boolean | undefined;\n hideFilters?: boolean | undefined;\n filters?: DataTableFilters | undefined;\n onFiltersChange?: ((filters: DataTableFilters) => void) | undefined;\n clientFaceting?: boolean | undefined;\n faceting?: DataTableFaceting | undefined;\n clientSearch?: boolean | undefined;\n hideSearch?: boolean | undefined;\n search?: DataTableSearch | undefined;\n onSearchChange?: ((search: DataTableSearch) => void) | undefined;\n};\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed so the type parameters are useful\nexport function DataTable<D extends RowData, C extends Array<ColumnDef<D, any>>>({\n data,\n columns,\n clientPagination = false,\n hidePagination = false,\n pagination: controlledPagination,\n onPaginationChange,\n clientSorting = false,\n sorting: controlledSorting,\n hideSorting = false,\n onSortingChange,\n columnVisibility: controlledColumnVisibility,\n hideColumnVisibility = false,\n onColumnVisibilityChange,\n columnOrder: controlledColumnOrder,\n hideColumnOrder = false,\n onColumnOrderChange,\n columnPinning: controlledColumnPinning,\n hideColumnPinning = false,\n onColumnPinningChange,\n hideColumnResizing = false,\n clientFilters = false,\n hideFilters = false,\n filters: controlledFilters,\n onFiltersChange,\n clientFaceting = false,\n faceting,\n clientSearch = false,\n hideSearch = false,\n search: controlledSearch,\n onSearchChange,\n}: DataTableProps<D, C>) {\n let [pagination, setPagination] = useState<PaginationState>(\n controlledPagination ?\n {\n pageIndex: Math.max(0, controlledPagination.page - 1),\n pageSize: controlledPagination.pageSize,\n }\n : {\n pageIndex: 0,\n pageSize: DEFAULT_PAGE_SIZE,\n },\n );\n let [columnVisibility, setColumnVisibility] = useState(controlledColumnVisibility ?? {});\n let [columnOrder, setColumnOrder] = useState<string[]>(\n controlledColumnOrder ?\n [\n ...controlledColumnOrder,\n ...columns\n .map((column, index) => {\n if (column.id) {\n return column.id;\n }\n\n if ('accessorKey' in column) {\n return String(column.accessorKey);\n }\n\n if (typeof column.header === 'string') {\n return String(column.header);\n }\n\n return String(index);\n })\n .filter((value) => !controlledColumnOrder.includes(value)),\n ]\n : columns.map((column, index) => {\n if (column.id) {\n return column.id;\n }\n\n if ('accessorKey' in column) {\n return String(column.accessorKey);\n }\n\n if (typeof column.header === 'string') {\n return String(column.header);\n }\n\n return String(index);\n }),\n );\n let [columnPinning, setColumnPinning] = useState<ColumnPinningState>(\n controlledColumnPinning ?\n {\n left: Object.entries(controlledColumnPinning)\n .filter(([, pinning]) => pinning === 'left')\n .map(([column]) => column),\n right: Object.entries(controlledColumnPinning)\n .filter(([, pinning]) => pinning === 'right')\n .map(([column]) => column),\n }\n : {left: [], right: []},\n );\n let [sorting, setSorting] = useState<SortingState>([]);\n let [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);\n let [search, setSearch] = useState('');\n\n let handleColumnVisibilityChange = useCallback(\n (columnVisibilityState: Updater<VisibilityState>) => {\n setColumnVisibility(columnVisibilityState);\n\n if (typeof columnVisibilityState === 'function') {\n onColumnVisibilityChange?.(columnVisibilityState(columnVisibility));\n } else {\n onColumnVisibilityChange?.(columnVisibilityState);\n }\n },\n [columnVisibility, onColumnVisibilityChange],\n );\n let handleColumnOrderChange = useCallback(\n (columnOrderState: Updater<ColumnOrderState>) => {\n setColumnOrder(columnOrderState);\n\n if (typeof columnOrderState === 'function') {\n onColumnOrderChange?.(columnOrderState(columnOrder));\n } else {\n onColumnOrderChange?.(columnOrderState);\n }\n },\n [columnOrder, onColumnOrderChange],\n );\n let handleColumnPinningChange = useCallback(\n (columnPinningState: Updater<ColumnPinningState>) => {\n setColumnPinning(columnPinningState);\n\n if (typeof columnPinningState === 'function') {\n onColumnPinningChange?.(fromPinningState(columnPinningState(columnPinning)));\n } else {\n onColumnPinningChange?.(fromPinningState(columnPinningState));\n }\n },\n [columnPinning, onColumnPinningChange],\n );\n\n let table = useReactTable<D>({\n data,\n columns,\n getCoreRowModel: getCoreRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getPaginationRowModel: clientPagination ? getPaginationRowModel() : undefined,\n getFilteredRowModel: getFilteredRowModel(),\n getFacetedRowModel: clientFaceting ? getFacetedRowModel() : undefined,\n getFacetedUniqueValues: clientFaceting ? getFacetedUniqueValues() : undefined,\n getFacetedMinMaxValues: clientFaceting ? getFacetedMinMaxValues() : undefined,\n state: {\n pagination: clientPagination ? pagination : undefined,\n columnVisibility,\n columnOrder,\n columnPinning,\n sorting: clientSorting ? sorting : undefined,\n columnFilters: clientFilters ? columnFilters : undefined,\n globalFilter: clientSearch ? search : undefined,\n },\n onPaginationChange: clientPagination ? setPagination : undefined,\n onColumnVisibilityChange: handleColumnVisibilityChange,\n onColumnOrderChange: handleColumnOrderChange,\n onColumnPinningChange: handleColumnPinningChange,\n onSortingChange: clientSorting ? setSorting : undefined,\n onColumnFiltersChange: clientFilters ? setColumnFilters : undefined,\n onGlobalFilterChange: clientSearch ? setSearch : undefined,\n columnResizeMode: 'onChange',\n globalFilterFn: fuzzyFilter,\n });\n\n let handleDragEnd = useCallback(\n ({active, over}: DragEndEvent) => {\n if (over && active.id !== over.id) {\n table.setColumnOrder((previousColumnOrder) => {\n let oldIndex = previousColumnOrder.indexOf(active.id as string);\n let newIndex = previousColumnOrder.indexOf(over.id as string);\n\n return arrayMove(previousColumnOrder, oldIndex, newIndex);\n });\n }\n },\n [table],\n );\n\n let sensors = useSensors(\n useSensor(MouseSensor, {\n activationConstraint: {\n distance: 5,\n },\n }),\n useSensor(TouchSensor, {\n activationConstraint: {\n distance: 5,\n },\n }),\n useSensor(KeyboardSensor, {}),\n );\n\n let id = useId();\n\n let page =\n clientPagination ?\n table.getState().pagination.pageIndex + 1\n : (controlledPagination?.page ?? 1);\n let pageSize =\n clientPagination ?\n table.getState().pagination.pageSize\n : (controlledPagination?.pageSize ?? DEFAULT_PAGE_SIZE);\n let pageCount = clientPagination ? table.getPageCount() : (controlledPagination?.pageCount ?? 1);\n\n return (\n <DndContext\n collisionDetection={closestCenter}\n id={id}\n modifiers={[restrictToHorizontalAxis]}\n sensors={sensors}\n onDragEnd={handleDragEnd}\n >\n {hideSearch ? null : (\n <DataTableSearchComponent\n clientSearch={clientSearch}\n search={controlledSearch}\n table={table}\n onSearch={onSearchChange}\n />\n )}\n <div className=\"w-full overflow-x-scroll overflow-y-visible [scrollbar-width:thin]\">\n <Table\n style={{\n width: table.getCenterTotalSize(),\n tableLayout: 'fixed',\n }}\n >\n <TableHead>\n {table.getHeaderGroups().map((headerGroup) => (\n <TableRow key={headerGroup.id}>\n <SortableContext items={columnOrder} strategy={horizontalListSortingStrategy}>\n {headerGroup.headers.map((header) => (\n <DataTableHeader\n key={header.id}\n clientFaceting={clientFaceting}\n clientFilters={clientFilters}\n clientSorting={clientSorting}\n faceting={faceting}\n filters={controlledFilters}\n header={header}\n hideColumnOrder={hideColumnOrder}\n hideColumnPinning={hideColumnPinning}\n hideColumnResizing={hideColumnResizing}\n hideColumnVisibility={hideColumnVisibility}\n hideFilters={hideFilters}\n hideSorting={hideSorting}\n sorting={controlledSorting}\n table={table}\n onFiltering={onFiltersChange}\n onSorting={onSortingChange}\n />\n ))}\n </SortableContext>\n </TableRow>\n ))}\n </TableHead>\n <TableBody>\n {table.getRowModel().rows.map((row) => (\n <TableRow key={row.id}>\n {row.getVisibleCells().map((cell) => {\n let value = cell.getValue();\n\n return (\n <TableCell\n key={cell.id}\n className={getCommonPinningClasses(cell.column)}\n style={{...getCommonPinningStyles(cell.column)}}\n title={value === null || value === undefined ? undefined : String(value)}\n >\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </TableCell>\n );\n })}\n </TableRow>\n ))}\n </TableBody>\n <TableFoot>\n {table.getFooterGroups().map((footerGroup) => (\n <TableRow key={footerGroup.id}>\n {footerGroup.headers.map((header) => (\n <TableHeader key={header.id}>\n {header.isPlaceholder ? null : (\n flexRender(header.column.columnDef.footer, header.getContext())\n )}\n </TableHeader>\n ))}\n </TableRow>\n ))}\n </TableFoot>\n </Table>\n </div>\n {hidePagination ? null : (\n <DataTablePaginationComponent\n clientPagination={clientPagination}\n page={page}\n pageCount={pageCount}\n pageSize={pageSize}\n table={table}\n onPagination={onPaginationChange}\n />\n )}\n </DndContext>\n );\n}\n"],
|
|
5
|
-
"mappings": ";
|
|
4
|
+
"sourcesContent": ["import {horizontalListSortingStrategy, SortableContext} from '@dnd-kit/sortable';\nimport {\n type ColumnDef,\n type ColumnFiltersState,\n type ColumnOrderState,\n type ColumnPinningState,\n flexRender,\n getCoreRowModel,\n getFacetedMinMaxValues,\n getFacetedRowModel,\n getFacetedUniqueValues,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n type Header,\n type PaginationState,\n type Row,\n type RowData,\n type SortingState,\n type Updater,\n useReactTable,\n type VisibilityState,\n} from '@tanstack/react-table';\nimport {useCallback, useState} from 'react';\n\nimport {Button} from '../Button.js';\nimport {Dialog} from '../Dialog.js';\nimport {DialogPanel} from '../DialogPanel.js';\nimport {DialogTitle} from '../DialogTitle.js';\nimport {Table} from '../Table.js';\nimport {TableBody} from '../TableBody.js';\nimport {TableCell} from '../TableCell.js';\nimport {TableFoot} from '../TableFoot.js';\nimport {TableHead} from '../TableHead.js';\nimport {TableHeader} from '../TableHeader.js';\nimport {TableRow} from '../TableRow.js';\nimport {type DataTableColumnOrder} from './DataTableColumnOrder.js';\nimport {type DataTableColumnPinning} from './DataTableColumnPinning.js';\nimport {type DataTableColumnVisibility} from './DataTableColumnVisibility.js';\nimport {type DataTableFaceting} from './DataTableFaceting.js';\nimport {type DataTableFilters} from './DataTableFilters.js';\nimport {type DataTablePagination} from './DataTablePagination.js';\nimport {type DataTableSearch} from './DataTableSearch.js';\nimport {type DataTableSorting} from './DataTableSorting.js';\nimport {\n DataTableFilters as DataTableFiltersComponent,\n DataTableHeader,\n DataTableMenu,\n DataTablePagination as DataTablePaginationComponent,\n DataTableSearch as DataTableSearchComponent,\n DEFAULT_PAGE_SIZE,\n fromPinningState,\n fuzzyFilter,\n} from './internals.js';\nimport {DataTableRow} from './internals/DataTableRow.js';\n\ndeclare module '@tanstack/react-table' {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars -- false positive\n interface ColumnMeta<TData extends RowData, TValue> {\n filterVariant?: 'range' | 'select' | 'text';\n }\n}\n\nexport type DataTableProps<D, C> = {\n data: D[];\n columns: C;\n clientPagination?: boolean | undefined;\n hidePagination?: boolean | undefined;\n pagination?: DataTablePagination | undefined;\n onPaginationChange?:\n | ((\n pagination: Pick<DataTablePagination, 'page'> | Pick<DataTablePagination, 'pageSize'>,\n ) => void)\n | undefined;\n columnVisibility?: DataTableColumnVisibility;\n hideColumnVisibility?: boolean | undefined;\n onColumnVisibilityChange?: ((columnVisibility: DataTableColumnVisibility) => void) | undefined;\n columnOrder?: DataTableColumnOrder;\n hideColumnOrder?: boolean | undefined;\n onColumnOrderChange?: ((columnOrder: DataTableColumnOrder) => void) | undefined;\n columnPinning?: DataTableColumnPinning;\n hideColumnPinning?: boolean | undefined;\n onColumnPinningChange?: ((columnPinning: DataTableColumnPinning) => void) | undefined;\n hideColumnResizing?: boolean | undefined;\n clientSorting?: boolean | undefined;\n sorting?: DataTableSorting | undefined;\n hideSorting?: boolean | undefined;\n onSortingChange?: ((sorting: DataTableSorting) => void) | undefined;\n clientFilters?: boolean | undefined;\n hideFilters?: boolean | undefined;\n filters?: DataTableFilters | undefined;\n onFiltersChange?: ((filters: DataTableFilters) => void) | undefined;\n clientFaceting?: boolean | undefined;\n faceting?: DataTableFaceting | undefined;\n clientSearch?: boolean | undefined;\n hideSearch?: boolean | undefined;\n search?: DataTableSearch | undefined;\n onSearchChange?: ((search: DataTableSearch) => void) | undefined;\n showRowSummaryOnClick?: boolean | undefined;\n};\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed so the type parameters are useful\nexport function DataTable<D extends RowData, C extends Array<ColumnDef<D, any>>>({\n data,\n columns,\n clientPagination = false,\n hidePagination = false,\n pagination: controlledPagination,\n onPaginationChange,\n clientSorting = false,\n sorting: controlledSorting,\n hideSorting = false,\n onSortingChange,\n columnVisibility: controlledColumnVisibility,\n hideColumnVisibility = false,\n onColumnVisibilityChange,\n columnOrder: controlledColumnOrder,\n hideColumnOrder = false,\n onColumnOrderChange,\n columnPinning: controlledColumnPinning,\n hideColumnPinning = false,\n onColumnPinningChange,\n hideColumnResizing = false,\n clientFilters = false,\n hideFilters = false,\n filters: controlledFilters,\n onFiltersChange,\n clientFaceting = false,\n faceting,\n clientSearch = false,\n hideSearch = false,\n search: controlledSearch,\n onSearchChange,\n showRowSummaryOnClick = false,\n}: DataTableProps<D, C>) {\n let [pagination, setPagination] = useState<PaginationState>(\n controlledPagination ?\n {\n pageIndex: Math.max(0, controlledPagination.page - 1),\n pageSize: controlledPagination.pageSize,\n }\n : {\n pageIndex: 0,\n pageSize: DEFAULT_PAGE_SIZE,\n },\n );\n let [columnVisibility, setColumnVisibility] = useState(controlledColumnVisibility ?? {});\n let [columnOrder, setColumnOrder] = useState<string[]>(\n controlledColumnOrder ?\n [\n ...controlledColumnOrder,\n ...columns\n .map((column, index) => {\n if (column.id) {\n return column.id;\n }\n\n if ('accessorKey' in column) {\n return String(column.accessorKey);\n }\n\n if (typeof column.header === 'string') {\n return String(column.header);\n }\n\n return String(index);\n })\n .filter((value) => !controlledColumnOrder.includes(value)),\n ]\n : columns.map((column, index) => {\n if (column.id) {\n return column.id;\n }\n\n if ('accessorKey' in column) {\n return String(column.accessorKey);\n }\n\n if (typeof column.header === 'string') {\n return String(column.header);\n }\n\n return String(index);\n }),\n );\n let [columnPinning, setColumnPinning] = useState<ColumnPinningState>(\n controlledColumnPinning ?\n {\n left: Object.entries(controlledColumnPinning)\n .filter(([, pinning]) => pinning === 'left')\n .map(([column]) => column),\n right: Object.entries(controlledColumnPinning)\n .filter(([, pinning]) => pinning === 'right')\n .map(([column]) => column),\n }\n : {left: [], right: []},\n );\n let [sorting, setSorting] = useState<SortingState>([]);\n let [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);\n let [showFilters, setShowFilters] = useState(true);\n let [search, setSearch] = useState('');\n let [isRowDialogOpen, setIsRowDialogOpen] = useState(false);\n let [rowDialogRow, setRowDialogRow] = useState<Row<D> | null>(null);\n\n let handleColumnVisibilityChange = useCallback(\n (columnVisibilityState: Updater<VisibilityState>) => {\n setColumnVisibility(columnVisibilityState);\n\n if (typeof columnVisibilityState === 'function') {\n onColumnVisibilityChange?.(columnVisibilityState(columnVisibility));\n } else {\n onColumnVisibilityChange?.(columnVisibilityState);\n }\n },\n [columnVisibility, onColumnVisibilityChange],\n );\n let handleColumnOrderChange = useCallback(\n (columnOrderState: Updater<ColumnOrderState>) => {\n setColumnOrder(columnOrderState);\n\n if (typeof columnOrderState === 'function') {\n onColumnOrderChange?.(columnOrderState(columnOrder));\n } else {\n onColumnOrderChange?.(columnOrderState);\n }\n },\n [columnOrder, onColumnOrderChange],\n );\n let handleColumnPinningChange = useCallback(\n (columnPinningState: Updater<ColumnPinningState>) => {\n setColumnPinning(columnPinningState);\n\n if (typeof columnPinningState === 'function') {\n onColumnPinningChange?.(fromPinningState(columnPinningState(columnPinning)));\n } else {\n onColumnPinningChange?.(fromPinningState(columnPinningState));\n }\n },\n [columnPinning, onColumnPinningChange],\n );\n\n let table = useReactTable<D>({\n data,\n columns,\n getCoreRowModel: getCoreRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getPaginationRowModel: clientPagination ? getPaginationRowModel() : undefined,\n getFilteredRowModel: getFilteredRowModel(),\n getFacetedRowModel: clientFaceting ? getFacetedRowModel() : undefined,\n getFacetedUniqueValues: clientFaceting ? getFacetedUniqueValues() : undefined,\n getFacetedMinMaxValues: clientFaceting ? getFacetedMinMaxValues() : undefined,\n state: {\n pagination: clientPagination ? pagination : undefined,\n columnVisibility,\n columnOrder,\n columnPinning,\n sorting: clientSorting ? sorting : undefined,\n columnFilters: clientFilters ? columnFilters : undefined,\n globalFilter: clientSearch ? search : undefined,\n },\n onPaginationChange: clientPagination ? setPagination : undefined,\n onColumnVisibilityChange: handleColumnVisibilityChange,\n onColumnOrderChange: handleColumnOrderChange,\n onColumnPinningChange: handleColumnPinningChange,\n onSortingChange: clientSorting ? setSorting : undefined,\n onColumnFiltersChange: clientFilters ? setColumnFilters : undefined,\n onGlobalFilterChange: clientSearch ? setSearch : undefined,\n columnResizeMode: 'onChange',\n globalFilterFn: fuzzyFilter,\n });\n\n let page =\n clientPagination ?\n table.getState().pagination.pageIndex + 1\n : (controlledPagination?.page ?? 1);\n let pageSize =\n clientPagination ?\n table.getState().pagination.pageSize\n : (controlledPagination?.pageSize ?? DEFAULT_PAGE_SIZE);\n let pageCount = clientPagination ? table.getPageCount() : (controlledPagination?.pageCount ?? 1);\n\n let toggleFilters = useCallback(() => {\n setShowFilters((value) => !value);\n }, []);\n\n let handleRowClick = useCallback((row: Row<D>) => {\n setRowDialogRow(row);\n setIsRowDialogOpen(true);\n }, []);\n\n let handleCloseRowDialog = useCallback(() => {\n setIsRowDialogOpen(false);\n }, []);\n\n return (\n <div\n className=\"group/table relative flex w-full gap-4\"\n data-show-filters={showFilters || undefined}\n >\n <div className=\"flex w-[calc(80%-var(--spacing)*4)] grow flex-col gap-4\">\n <div className=\"flex w-full flex-col gap-2\">\n {hideSearch ? null : (\n <DataTableSearchComponent\n clientSearch={clientSearch}\n search={controlledSearch}\n table={table}\n onSearch={onSearchChange}\n />\n )}\n {hideColumnOrder && hideColumnPinning && hideColumnVisibility && hideFilters ? null : (\n <DataTableMenu\n hideColumnOrder={hideColumnOrder}\n hideColumnPinning={hideColumnPinning}\n hideColumnVisibility={hideColumnVisibility}\n hideFilters={hideFilters}\n table={table}\n toggleFilters={toggleFilters}\n />\n )}\n </div>\n <div className=\"w-full overflow-x-scroll overflow-y-visible [scrollbar-width:thin]\">\n <Table\n style={{\n width: table.getCenterTotalSize(),\n tableLayout: 'fixed',\n }}\n >\n <TableHead>\n {table.getHeaderGroups().map((headerGroup) => (\n <TableRow key={headerGroup.id}>\n <SortableContext items={columnOrder} strategy={horizontalListSortingStrategy}>\n {headerGroup.headers.map((header) => (\n <DataTableHeader\n key={header.id}\n clientSorting={clientSorting}\n header={header}\n hideColumnOrder={hideColumnOrder}\n hideColumnResizing={hideColumnResizing}\n hideSorting={hideSorting}\n sorting={controlledSorting}\n onSorting={onSortingChange}\n />\n ))}\n </SortableContext>\n </TableRow>\n ))}\n </TableHead>\n <TableBody>\n {table.getRowModel().rows.map((row) => (\n <DataTableRow\n key={row.id}\n row={row}\n onClick={showRowSummaryOnClick ? handleRowClick : undefined}\n />\n ))}\n </TableBody>\n <TableFoot>\n {table.getFooterGroups().map((footerGroup) => (\n <TableRow key={footerGroup.id}>\n {footerGroup.headers.map((header) => (\n <TableHeader key={header.id}>\n {header.isPlaceholder ? null : (\n flexRender(header.column.columnDef.footer, header.getContext())\n )}\n </TableHeader>\n ))}\n </TableRow>\n ))}\n </TableFoot>\n </Table>\n </div>\n {hidePagination ? null : (\n <DataTablePaginationComponent\n clientPagination={clientPagination}\n page={page}\n pageCount={pageCount}\n pageSize={pageSize}\n table={table}\n onPagination={onPaginationChange}\n />\n )}\n </div>\n {hideFilters ? null : (\n <DataTableFiltersComponent\n clientFaceting={clientFaceting}\n clientFilters={clientFilters}\n faceting={faceting}\n filters={controlledFilters}\n table={table}\n onFiltering={onFiltersChange}\n />\n )}\n {showRowSummaryOnClick ?\n <Dialog open={isRowDialogOpen} onClose={handleCloseRowDialog}>\n <DialogPanel className=\"flex flex-col gap-4\">\n <DialogTitle>{`#${(rowDialogRow?.index ?? 0) + 1}`}</DialogTitle>\n <div className=\"max-h-[60vh] overflow-auto\">\n {rowDialogRow ?\n <Table className=\"w-full\">\n <TableBody>\n {rowDialogRow.getVisibleCells().map((cell) => (\n <TableRow key={cell.id}>\n <TableHeader className=\"w-[16rem]\">\n {flexRender(cell.column.columnDef.header, {\n table,\n column: cell.column,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/consistent-type-assertions -- needed\n header: {column: cell.column} as Header<any, any>,\n })}\n </TableHeader>\n <TableCell>\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </TableCell>\n </TableRow>\n ))}\n </TableBody>\n </Table>\n : null}\n </div>\n <Button className=\"self-center\" onClick={handleCloseRowDialog}>\n Close\n </Button>\n </DialogPanel>\n </Dialog>\n : null}\n </div>\n );\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { type Column, type Table } from '@tanstack/react-table';
|
|
2
|
+
import { type DataTableProps } from '../DataTable.js';
|
|
3
|
+
export type DataTableFilterProps = {
|
|
4
|
+
table: Table<any>;
|
|
5
|
+
column: Column<any>;
|
|
6
|
+
clientFilters: DataTableProps<any, any>['clientFilters'];
|
|
7
|
+
filters: DataTableProps<any, any>['filters'];
|
|
8
|
+
onFiltering: DataTableProps<any, any>['onFiltersChange'];
|
|
9
|
+
clientFaceting: DataTableProps<any, any>['clientFaceting'];
|
|
10
|
+
faceting: DataTableProps<any, any>['faceting'];
|
|
11
|
+
};
|
|
12
|
+
export declare function DataTableFilter({ table, column, clientFilters, filters: controlledFilters, onFiltering, clientFaceting, faceting, }: DataTableFilterProps): import("react/jsx-runtime").JSX.Element;
|