@multiplatform.one/table 7.8.0 → 7.11.0
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/README.md +60 -0
- package/dist/cjs/components/DataTable/DataTableCardControls.cjs +90 -54
- package/dist/cjs/components/DataTable/DataTableCardControls.native.js +93 -56
- package/dist/cjs/components/DataTable/DataTableCardControls.native.js.map +1 -1
- package/dist/cjs/components/DataTable/DataTableMobileCards.cjs +100 -33
- package/dist/cjs/components/DataTable/DataTableMobileCards.native.js +139 -38
- package/dist/cjs/components/DataTable/DataTableMobileCards.native.js.map +1 -1
- package/dist/cjs/components/DataTable/DataTableRoot.cjs +51 -8
- package/dist/cjs/components/DataTable/DataTableRoot.native.js +53 -9
- package/dist/cjs/components/DataTable/DataTableRoot.native.js.map +1 -1
- package/dist/cjs/components/DataTable/index.native.js +59 -93
- package/dist/cjs/components/DataTable/index.native.js.map +1 -1
- package/dist/cjs/components/DataTableFilterButton/index.cjs +14 -0
- package/dist/cjs/components/DataTableFilterButton/index.native.js +15 -0
- package/dist/cjs/components/DataTableFilterButton/index.native.js.map +1 -1
- package/dist/cjs/components/DataTableToolbar/index.cjs +178 -101
- package/dist/cjs/components/DataTableToolbar/index.native.js +187 -109
- package/dist/cjs/components/DataTableToolbar/index.native.js.map +1 -1
- package/dist/cjs/hooks/useDataTable.cjs +32 -1
- package/dist/cjs/hooks/useDataTable.native.js +37 -1
- package/dist/cjs/hooks/useDataTable.native.js.map +1 -1
- package/dist/esm/components/DataTable/DataTableCardControls.mjs +89 -54
- package/dist/esm/components/DataTable/DataTableCardControls.mjs.map +1 -1
- package/dist/esm/components/DataTable/DataTableCardControls.native.js +92 -56
- package/dist/esm/components/DataTable/DataTableCardControls.native.js.map +1 -1
- package/dist/esm/components/DataTable/DataTableMobileCards.mjs +99 -34
- package/dist/esm/components/DataTable/DataTableMobileCards.mjs.map +1 -1
- package/dist/esm/components/DataTable/DataTableMobileCards.native.js +138 -39
- package/dist/esm/components/DataTable/DataTableMobileCards.native.js.map +1 -1
- package/dist/esm/components/DataTable/DataTableRoot.mjs +53 -10
- package/dist/esm/components/DataTable/DataTableRoot.mjs.map +1 -1
- package/dist/esm/components/DataTable/DataTableRoot.native.js +55 -11
- package/dist/esm/components/DataTable/DataTableRoot.native.js.map +1 -1
- package/dist/esm/components/DataTable/index.native.js +60 -94
- package/dist/esm/components/DataTable/index.native.js.map +1 -1
- package/dist/esm/components/DataTableFilterButton/index.mjs +14 -1
- package/dist/esm/components/DataTableFilterButton/index.mjs.map +1 -1
- package/dist/esm/components/DataTableFilterButton/index.native.js +15 -1
- package/dist/esm/components/DataTableFilterButton/index.native.js.map +1 -1
- package/dist/esm/components/DataTableToolbar/index.mjs +180 -104
- package/dist/esm/components/DataTableToolbar/index.mjs.map +1 -1
- package/dist/esm/components/DataTableToolbar/index.native.js +189 -112
- package/dist/esm/components/DataTableToolbar/index.native.js.map +1 -1
- package/dist/esm/hooks/useDataTable.mjs +32 -1
- package/dist/esm/hooks/useDataTable.mjs.map +1 -1
- package/dist/esm/hooks/useDataTable.native.js +37 -1
- package/dist/esm/hooks/useDataTable.native.js.map +1 -1
- package/dist/jsx/components/DataTable/DataTableCardControls.mjs +89 -54
- package/dist/jsx/components/DataTable/DataTableCardControls.mjs.map +1 -1
- package/dist/jsx/components/DataTable/DataTableCardControls.native.js +93 -56
- package/dist/jsx/components/DataTable/DataTableCardControls.native.js.map +1 -1
- package/dist/jsx/components/DataTable/DataTableMobileCards.mjs +99 -34
- package/dist/jsx/components/DataTable/DataTableMobileCards.mjs.map +1 -1
- package/dist/jsx/components/DataTable/DataTableMobileCards.native.js +139 -38
- package/dist/jsx/components/DataTable/DataTableMobileCards.native.js.map +1 -1
- package/dist/jsx/components/DataTable/DataTableRoot.mjs +53 -10
- package/dist/jsx/components/DataTable/DataTableRoot.mjs.map +1 -1
- package/dist/jsx/components/DataTable/DataTableRoot.native.js +53 -9
- package/dist/jsx/components/DataTable/DataTableRoot.native.js.map +1 -1
- package/dist/jsx/components/DataTable/index.native.js +59 -93
- package/dist/jsx/components/DataTable/index.native.js.map +1 -1
- package/dist/jsx/components/DataTableFilterButton/index.mjs +14 -1
- package/dist/jsx/components/DataTableFilterButton/index.mjs.map +1 -1
- package/dist/jsx/components/DataTableFilterButton/index.native.js +15 -0
- package/dist/jsx/components/DataTableFilterButton/index.native.js.map +1 -1
- package/dist/jsx/components/DataTableToolbar/index.mjs +180 -104
- package/dist/jsx/components/DataTableToolbar/index.mjs.map +1 -1
- package/dist/jsx/components/DataTableToolbar/index.native.js +187 -109
- package/dist/jsx/components/DataTableToolbar/index.native.js.map +1 -1
- package/dist/jsx/hooks/useDataTable.mjs +32 -1
- package/dist/jsx/hooks/useDataTable.mjs.map +1 -1
- package/dist/jsx/hooks/useDataTable.native.js +37 -1
- package/dist/jsx/hooks/useDataTable.native.js.map +1 -1
- package/package.json +14 -14
- package/src/components/DataTable/DataTable.spec.tsx +5 -3
- package/src/components/DataTable/DataTable.stories.tsx +59 -0
- package/src/components/DataTable/DataTableCardControls.stories.tsx +61 -2
- package/src/components/DataTable/DataTableCardControls.tsx +92 -66
- package/src/components/DataTable/DataTableMobileCards.tsx +162 -39
- package/src/components/DataTable/DataTableRoot.tsx +82 -14
- package/src/components/DataTable/cardLayout.spec.tsx +23 -11
- package/src/components/DataTable/cardToolbar.spec.tsx +238 -0
- package/src/components/DataTable/chromeInterplay.spec.tsx +7 -5
- package/src/components/DataTable/columnWidthLayout.spec.tsx +189 -0
- package/src/components/DataTable/dataTableCardControls.spec.tsx +3 -2
- package/src/components/DataTable/dataTableMobileCards.spec.tsx +50 -2
- package/src/components/DataTable/footerLayout.spec.tsx +250 -0
- package/src/components/DataTable/index.native.tsx +80 -124
- package/src/components/DataTable/nativeCardParity.spec.tsx +95 -0
- package/src/components/DataTable/pinningGeometry.spec.tsx +66 -1
- package/src/components/DataTableExport/DataTableExport.spec.tsx +42 -18
- package/src/components/DataTableFilterButton/index.tsx +9 -0
- package/src/components/DataTableToolbar/index.tsx +184 -105
- package/src/hooks/useDataTable.spec.ts +114 -0
- package/src/hooks/useDataTable.ts +23 -1
- package/src/types.ts +14 -12
- package/types/components/DataTable/DataTableCardControls.d.ts +3 -0
- package/types/components/DataTable/DataTableCardControls.d.ts.map +1 -1
- package/types/components/DataTable/DataTableMobileCards.d.ts +42 -8
- package/types/components/DataTable/DataTableMobileCards.d.ts.map +1 -1
- package/types/components/DataTable/DataTableRoot.d.ts.map +1 -1
- package/types/components/DataTable/index.native.d.ts +1 -1
- package/types/components/DataTable/index.native.d.ts.map +1 -1
- package/types/components/DataTableFilterButton/index.d.ts +2 -1
- package/types/components/DataTableFilterButton/index.d.ts.map +1 -1
- package/types/components/DataTableToolbar/index.d.ts +1 -0
- package/types/components/DataTableToolbar/index.d.ts.map +1 -1
- package/types/hooks/useDataTable.d.ts.map +1 -1
- package/types/types.d.ts +14 -12
- package/types/types.d.ts.map +1 -1
package/README.md
CHANGED
|
@@ -927,8 +927,68 @@ function ServerTable({ data, totalCount }) {
|
|
|
927
927
|
|
|
928
928
|
## 🎨 Customization
|
|
929
929
|
|
|
930
|
+
### Column widths
|
|
931
|
+
|
|
932
|
+
`DataTableColumn.width`, `minWidth` and `maxWidth` map to TanStack's `size`,
|
|
933
|
+
`minSize` and `maxSize` before table defaults are applied. Each canonical property
|
|
934
|
+
wins independently when supplied. Aliases accept finite nonnegative pixels,
|
|
935
|
+
including fractions; invalid aliases are ignored. A zero width still respects
|
|
936
|
+
the minimum, so it doesn't hide a column.
|
|
937
|
+
|
|
938
|
+
```tsx
|
|
939
|
+
const columns: DataTableColumn<Row>[] = [
|
|
940
|
+
{ accessorKey: "rank", header: "Rank", width: 48 },
|
|
941
|
+
{ accessorKey: "name", header: "Name", width: 320, minWidth: 200, maxWidth: 400 },
|
|
942
|
+
{ accessorKey: "score", header: "Score", width: 80 },
|
|
943
|
+
];
|
|
944
|
+
|
|
945
|
+
<DataTable data={rows} columns={columns} layout="table" columnLayout="scroll" />;
|
|
946
|
+
```
|
|
947
|
+
|
|
948
|
+
| Column layout | Sizing behavior |
|
|
949
|
+
| --- | --- |
|
|
950
|
+
| `equal` (default), without resizing | Unpinned cells share available width and ignore declared sizes. A development warning names `columnLayout` when widths are supplied. |
|
|
951
|
+
| `equal` with resizing | Resolved sizes set fixed cell widths. |
|
|
952
|
+
| `scroll` | Header, body and footer use resolved widths, including widths below 80px. Web tables scroll horizontally when their total exceeds the container. |
|
|
953
|
+
| `auto` | Keeps the existing table-layout algorithm on web. Resolved sizes are inputs, not a promise of measured content widths or last-column-only expansion. |
|
|
954
|
+
|
|
955
|
+
Pinned cells keep their resolved size in every mode so sticky offsets match the
|
|
956
|
+
boxes. A column with no sizing properties defaults to 150px in sized modes.
|
|
957
|
+
Fixed scroll columns can leave unused space when their total is narrower than
|
|
958
|
+
the container. Cards and list presentations keep their existing layout.
|
|
959
|
+
|
|
960
|
+
Sizing state from resizing or a loaded view overrides the initial size, subject
|
|
961
|
+
to the resolved min/max constraints. Resetting sizing reveals the declaration
|
|
962
|
+
again. Definitions aren't mutated, and grouped leaf columns are normalized
|
|
963
|
+
independently; a group width isn't distributed among its children.
|
|
964
|
+
|
|
965
|
+
This activates formerly ignored aliases in sized layouts. Review tables that
|
|
966
|
+
supplied them alongside canonical properties, especially mixed bounds such as
|
|
967
|
+
`size: 180, maxWidth: 140`, which resolves to 140 unless `maxSize` is also supplied.
|
|
968
|
+
|
|
969
|
+
Saved views still use `ColumnView.width`; their schema hasn't changed. Loading a
|
|
970
|
+
prepared view applies its sizing state. The existing save path selects columns
|
|
971
|
+
from visibility-state keys, so widths for other columns can be omitted. The
|
|
972
|
+
view-options slider retains its mount-time width snapshot after external updates
|
|
973
|
+
and its existing 50–300px editing range in 10px steps. General save/load round
|
|
974
|
+
trips and slider synchronization aren't repaired by column-definition normalization.
|
|
975
|
+
|
|
930
976
|
### Custom Toolbar
|
|
931
977
|
|
|
978
|
+
Default web cards keep the all-field **Filter** and **Sort** together in one
|
|
979
|
+
primary row. Filter includes hidden and non-column `filterableFields`; its chips
|
|
980
|
+
still reopen the same editor and can be removed or cleared. Search gets its own
|
|
981
|
+
line. Saved views, Save and the fetching indicator occupy a separate wrapping
|
|
982
|
+
group. A long active Sort label truncates within its row budget while its full
|
|
983
|
+
column and direction remain in the button's accessible description.
|
|
984
|
+
|
|
985
|
+
This composition is internal to the default cards path, including responsive
|
|
986
|
+
`layout="auto"`. Public standalone toolbars, the grid and custom `renderToolbar`
|
|
987
|
+
composition keep their existing layout. Custom toolbars retain the card Sort /
|
|
988
|
+
Add Filter fallback. That fallback remains column-based; a custom toolbar must
|
|
989
|
+
still mount `DataTableFilterButton` to host canonical hidden-field/chip editing.
|
|
990
|
+
The existing custom-only missing-editor limitation isn't repaired here.
|
|
991
|
+
|
|
932
992
|
`DataTableToolbar` composes a global-search section (the catalog `SearchInput` with a
|
|
933
993
|
clear affordance) and, behind a toolbar divider, a roving-focus actions section:
|
|
934
994
|
a filter button (when the table has filterable fields), your `customActions`, and view
|
|
@@ -22,7 +22,8 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
|
|
|
22
22
|
}), mod);
|
|
23
23
|
var DataTableCardControls_exports = {};
|
|
24
24
|
__export(DataTableCardControls_exports, {
|
|
25
|
-
DataTableCardControls: () => DataTableCardControls
|
|
25
|
+
DataTableCardControls: () => DataTableCardControls,
|
|
26
|
+
DataTableCardSortControl: () => DataTableCardSortControl
|
|
26
27
|
});
|
|
27
28
|
module.exports = __toCommonJS(DataTableCardControls_exports);
|
|
28
29
|
var import_react = require("@phosphor-icons/react");
|
|
@@ -39,6 +40,90 @@ var import_jsx_runtime = require("react/jsx-runtime");
|
|
|
39
40
|
function getColumnLabel(column) {
|
|
40
41
|
return typeof column.columnDef.header === "string" ? column.columnDef.header : column.id;
|
|
41
42
|
}
|
|
43
|
+
function DataTableCardSortControl({
|
|
44
|
+
table,
|
|
45
|
+
compact = false,
|
|
46
|
+
disabled = false,
|
|
47
|
+
contained = false
|
|
48
|
+
}) {
|
|
49
|
+
const {
|
|
50
|
+
t
|
|
51
|
+
} = (0, import_react_i18next.useTranslation)();
|
|
52
|
+
const {
|
|
53
|
+
knobProps
|
|
54
|
+
} = (0, import_theme.useResolvedKnobs)({
|
|
55
|
+
component: "DataTable",
|
|
56
|
+
compact
|
|
57
|
+
});
|
|
58
|
+
const chrome = (0, import_dataTableChrome.dataTableChrome)(String(knobProps.sizeToken));
|
|
59
|
+
const [sortMenuOpen, setSortMenuOpen] = (0, import_react2.useState)(false);
|
|
60
|
+
const sortableColumns = table.getVisibleLeafColumns().filter(col => col.getCanSort());
|
|
61
|
+
const activeSort = table.getState().sorting?.[0];
|
|
62
|
+
const activeSortColumn = activeSort ? table.getColumn(activeSort.id) : void 0;
|
|
63
|
+
const sortLabel = activeSortColumn ? `${getColumnLabel(activeSortColumn)} ${activeSort.desc ? "\u2193" : "\u2191"}` : t("Sort");
|
|
64
|
+
if (!sortableColumns.length) return null;
|
|
65
|
+
const menu = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.DropdownMenu, {
|
|
66
|
+
open: disabled ? false : sortMenuOpen,
|
|
67
|
+
onOpenChange: open => {
|
|
68
|
+
if (disabled) return;
|
|
69
|
+
setSortMenuOpen(open);
|
|
70
|
+
},
|
|
71
|
+
children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu.Trigger, {
|
|
72
|
+
asChild: true,
|
|
73
|
+
children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
|
|
74
|
+
size: knobProps.sizeToken,
|
|
75
|
+
icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CaretUpDownIcon, {
|
|
76
|
+
size: chrome.iconPx
|
|
77
|
+
}),
|
|
78
|
+
"aria-label": t("Sort rows"),
|
|
79
|
+
...(contained ? {
|
|
80
|
+
minWidth: 0,
|
|
81
|
+
maxWidth: "100%",
|
|
82
|
+
"aria-description": activeSortColumn ? sortLabel : void 0
|
|
83
|
+
} : {}),
|
|
84
|
+
disabled,
|
|
85
|
+
children: sortLabel
|
|
86
|
+
})
|
|
87
|
+
}), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.DropdownMenu.Content, {
|
|
88
|
+
children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu.Label, {
|
|
89
|
+
children: t("Sort by")
|
|
90
|
+
}), sortableColumns.map(column => {
|
|
91
|
+
const sorted = column.getIsSorted();
|
|
92
|
+
return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu.Item, {
|
|
93
|
+
closeOnSelect: false,
|
|
94
|
+
icon: sorted === "asc" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CaretDownIcon, {
|
|
95
|
+
size: chrome.iconPx
|
|
96
|
+
}) : sorted === "desc" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CaretDownIcon, {
|
|
97
|
+
size: chrome.iconPx,
|
|
98
|
+
style: {
|
|
99
|
+
transform: "rotate(180deg)"
|
|
100
|
+
}
|
|
101
|
+
}) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CaretUpDownIcon, {
|
|
102
|
+
size: chrome.iconPx
|
|
103
|
+
}),
|
|
104
|
+
"aria-label": (0, import_withInterp.withInterp)(t("Sort by {{column}}", {
|
|
105
|
+
column: getColumnLabel(column)
|
|
106
|
+
}), {
|
|
107
|
+
column: getColumnLabel(column)
|
|
108
|
+
}),
|
|
109
|
+
onSelect: () => {
|
|
110
|
+
if (sorted === false) column.toggleSorting(false);else if (sorted === "asc") column.toggleSorting(true);else column.clearSorting();
|
|
111
|
+
},
|
|
112
|
+
children: getColumnLabel(column)
|
|
113
|
+
}, column.id);
|
|
114
|
+
})]
|
|
115
|
+
})]
|
|
116
|
+
});
|
|
117
|
+
return contained ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
|
|
118
|
+
"data-table-card-sort": "",
|
|
119
|
+
flexBasis: "auto",
|
|
120
|
+
flexGrow: 0,
|
|
121
|
+
flexShrink: 1,
|
|
122
|
+
minWidth: 0,
|
|
123
|
+
maxWidth: "50%",
|
|
124
|
+
children: menu
|
|
125
|
+
}) : menu;
|
|
126
|
+
}
|
|
42
127
|
function DataTableCardControls({
|
|
43
128
|
table,
|
|
44
129
|
enableSorting = false,
|
|
@@ -51,18 +136,11 @@ function DataTableCardControls({
|
|
|
51
136
|
t
|
|
52
137
|
} = (0, import_react_i18next.useTranslation)();
|
|
53
138
|
const {
|
|
54
|
-
knobProps,
|
|
55
139
|
disabledState
|
|
56
140
|
} = (0, import_theme.useResolvedKnobs)({
|
|
57
141
|
component: "DataTable",
|
|
58
142
|
compact
|
|
59
143
|
});
|
|
60
|
-
const chrome = (0, import_dataTableChrome.dataTableChrome)(String(knobProps.sizeToken));
|
|
61
|
-
const [sortMenuOpen, setSortMenuOpen] = (0, import_react2.useState)(false);
|
|
62
|
-
const sortableColumns = enableSorting ? table.getVisibleLeafColumns().filter(col => col.getCanSort()) : [];
|
|
63
|
-
const activeSort = table.getState().sorting?.[0];
|
|
64
|
-
const activeSortColumn = activeSort ? table.getColumn(activeSort.id) : void 0;
|
|
65
|
-
const sortLabel = activeSortColumn ? `${getColumnLabel(activeSortColumn)} ${activeSort.desc ? "\u2193" : "\u2191"}` : t("Sort");
|
|
66
144
|
if (!enableSorting && !enableFiltering) return null;
|
|
67
145
|
return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
|
|
68
146
|
alignItems: "center",
|
|
@@ -71,52 +149,10 @@ function DataTableCardControls({
|
|
|
71
149
|
paddingVertical: "$2",
|
|
72
150
|
role: "toolbar",
|
|
73
151
|
"aria-label": t("Card list controls"),
|
|
74
|
-
children: [enableSorting &&
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
setSortMenuOpen(open);
|
|
79
|
-
},
|
|
80
|
-
children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu.Trigger, {
|
|
81
|
-
asChild: true,
|
|
82
|
-
children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
|
|
83
|
-
size: knobProps.sizeToken,
|
|
84
|
-
icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CaretUpDownIcon, {
|
|
85
|
-
size: chrome.iconPx
|
|
86
|
-
}),
|
|
87
|
-
"aria-label": t("Sort rows"),
|
|
88
|
-
disabled,
|
|
89
|
-
children: sortLabel
|
|
90
|
-
})
|
|
91
|
-
}), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.DropdownMenu.Content, {
|
|
92
|
-
children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu.Label, {
|
|
93
|
-
children: t("Sort by")
|
|
94
|
-
}), sortableColumns.map(column => {
|
|
95
|
-
const sorted = column.getIsSorted();
|
|
96
|
-
return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu.Item, {
|
|
97
|
-
closeOnSelect: false,
|
|
98
|
-
icon: sorted === "asc" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CaretDownIcon, {
|
|
99
|
-
size: chrome.iconPx
|
|
100
|
-
}) : sorted === "desc" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CaretDownIcon, {
|
|
101
|
-
size: chrome.iconPx,
|
|
102
|
-
style: {
|
|
103
|
-
transform: "rotate(180deg)"
|
|
104
|
-
}
|
|
105
|
-
}) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CaretUpDownIcon, {
|
|
106
|
-
size: chrome.iconPx
|
|
107
|
-
}),
|
|
108
|
-
"aria-label": (0, import_withInterp.withInterp)(t("Sort by {{column}}", {
|
|
109
|
-
column: getColumnLabel(column)
|
|
110
|
-
}), {
|
|
111
|
-
column: getColumnLabel(column)
|
|
112
|
-
}),
|
|
113
|
-
onSelect: () => {
|
|
114
|
-
if (sorted === false) column.toggleSorting(false);else if (sorted === "asc") column.toggleSorting(true);else column.clearSorting();
|
|
115
|
-
},
|
|
116
|
-
children: getColumnLabel(column)
|
|
117
|
-
}, column.id);
|
|
118
|
-
})]
|
|
119
|
-
})]
|
|
152
|
+
children: [enableSorting && /* @__PURE__ */(0, import_jsx_runtime.jsx)(DataTableCardSortControl, {
|
|
153
|
+
table,
|
|
154
|
+
compact,
|
|
155
|
+
disabled
|
|
120
156
|
}), enableFiltering && availableColumns.length > 0 &&
|
|
121
157
|
// DataTableFilters (chrome) has no disabled API — the wrapper is the
|
|
122
158
|
// LC-40 carrier and interaction gate for the disabled table.
|
|
@@ -24,7 +24,8 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
|
|
|
24
24
|
}), mod);
|
|
25
25
|
var DataTableCardControls_exports = {};
|
|
26
26
|
__export(DataTableCardControls_exports, {
|
|
27
|
-
DataTableCardControls: () => DataTableCardControls
|
|
27
|
+
DataTableCardControls: () => DataTableCardControls,
|
|
28
|
+
DataTableCardSortControl: () => DataTableCardSortControl
|
|
28
29
|
});
|
|
29
30
|
module.exports = __toCommonJS(DataTableCardControls_exports);
|
|
30
31
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
@@ -41,34 +42,112 @@ var import_dataTableChrome = require("./dataTableChrome.native.js");
|
|
|
41
42
|
function getColumnLabel(column) {
|
|
42
43
|
return typeof column.columnDef.header === "string" ? column.columnDef.header : column.id;
|
|
43
44
|
}
|
|
44
|
-
function
|
|
45
|
+
function DataTableCardSortControl(param) {
|
|
45
46
|
var {
|
|
46
47
|
table,
|
|
47
|
-
enableSorting = false,
|
|
48
|
-
enableFiltering = false,
|
|
49
|
-
availableColumns = [],
|
|
50
48
|
compact = false,
|
|
51
|
-
disabled = false
|
|
49
|
+
disabled = false,
|
|
50
|
+
contained = false
|
|
52
51
|
} = param;
|
|
53
52
|
var _table_getState_sorting;
|
|
54
53
|
var {
|
|
55
54
|
t
|
|
56
55
|
} = (0, import_react_i18next.useTranslation)();
|
|
57
56
|
var {
|
|
58
|
-
knobProps
|
|
59
|
-
disabledState
|
|
57
|
+
knobProps
|
|
60
58
|
} = (0, import_theme.useResolvedKnobs)({
|
|
61
59
|
component: "DataTable",
|
|
62
60
|
compact
|
|
63
61
|
});
|
|
64
62
|
var chrome = (0, import_dataTableChrome.dataTableChrome)(String(knobProps.sizeToken));
|
|
65
63
|
var [sortMenuOpen, setSortMenuOpen] = (0, import_react2.useState)(false);
|
|
66
|
-
var sortableColumns =
|
|
64
|
+
var sortableColumns = table.getVisibleLeafColumns().filter(function (col) {
|
|
67
65
|
return col.getCanSort();
|
|
68
|
-
})
|
|
66
|
+
});
|
|
69
67
|
var activeSort = (_table_getState_sorting = table.getState().sorting) === null || _table_getState_sorting === void 0 ? void 0 : _table_getState_sorting[0];
|
|
70
68
|
var activeSortColumn = activeSort ? table.getColumn(activeSort.id) : void 0;
|
|
71
69
|
var sortLabel = activeSortColumn ? `${getColumnLabel(activeSortColumn)} ${activeSort.desc ? "\u2193" : "\u2191"}` : t("Sort");
|
|
70
|
+
if (!sortableColumns.length) return null;
|
|
71
|
+
var menu = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.DropdownMenu, {
|
|
72
|
+
open: disabled ? false : sortMenuOpen,
|
|
73
|
+
onOpenChange: function onOpenChange(open) {
|
|
74
|
+
if (disabled) return;
|
|
75
|
+
setSortMenuOpen(open);
|
|
76
|
+
},
|
|
77
|
+
children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu.Trigger, {
|
|
78
|
+
asChild: true,
|
|
79
|
+
children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
|
|
80
|
+
size: knobProps.sizeToken,
|
|
81
|
+
icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CaretUpDownIcon, {
|
|
82
|
+
size: chrome.iconPx
|
|
83
|
+
}),
|
|
84
|
+
"aria-label": t("Sort rows"),
|
|
85
|
+
...(contained ? {
|
|
86
|
+
minWidth: 0,
|
|
87
|
+
maxWidth: "100%",
|
|
88
|
+
"aria-description": activeSortColumn ? sortLabel : void 0
|
|
89
|
+
} : {}),
|
|
90
|
+
disabled,
|
|
91
|
+
children: sortLabel
|
|
92
|
+
})
|
|
93
|
+
}), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.DropdownMenu.Content, {
|
|
94
|
+
children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu.Label, {
|
|
95
|
+
children: t("Sort by")
|
|
96
|
+
}), sortableColumns.map(function (column) {
|
|
97
|
+
var sorted = column.getIsSorted();
|
|
98
|
+
return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu.Item, {
|
|
99
|
+
closeOnSelect: false,
|
|
100
|
+
icon: sorted === "asc" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CaretDownIcon, {
|
|
101
|
+
size: chrome.iconPx
|
|
102
|
+
}) : sorted === "desc" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CaretDownIcon, {
|
|
103
|
+
size: chrome.iconPx,
|
|
104
|
+
style: {
|
|
105
|
+
transform: "rotate(180deg)"
|
|
106
|
+
}
|
|
107
|
+
}) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CaretUpDownIcon, {
|
|
108
|
+
size: chrome.iconPx
|
|
109
|
+
}),
|
|
110
|
+
"aria-label": (0, import_withInterp.withInterp)(t("Sort by {{column}}", {
|
|
111
|
+
column: getColumnLabel(column)
|
|
112
|
+
}), {
|
|
113
|
+
column: getColumnLabel(column)
|
|
114
|
+
}),
|
|
115
|
+
onSelect: function onSelect() {
|
|
116
|
+
if (sorted === false) column.toggleSorting(false);else if (sorted === "asc") column.toggleSorting(true);else column.clearSorting();
|
|
117
|
+
},
|
|
118
|
+
children: getColumnLabel(column)
|
|
119
|
+
}, column.id);
|
|
120
|
+
})]
|
|
121
|
+
})]
|
|
122
|
+
});
|
|
123
|
+
return contained ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
|
|
124
|
+
"data-table-card-sort": "",
|
|
125
|
+
flexBasis: "auto",
|
|
126
|
+
flexGrow: 0,
|
|
127
|
+
flexShrink: 1,
|
|
128
|
+
minWidth: 0,
|
|
129
|
+
maxWidth: "50%",
|
|
130
|
+
children: menu
|
|
131
|
+
}) : menu;
|
|
132
|
+
}
|
|
133
|
+
function DataTableCardControls(param) {
|
|
134
|
+
var {
|
|
135
|
+
table,
|
|
136
|
+
enableSorting = false,
|
|
137
|
+
enableFiltering = false,
|
|
138
|
+
availableColumns = [],
|
|
139
|
+
compact = false,
|
|
140
|
+
disabled = false
|
|
141
|
+
} = param;
|
|
142
|
+
var {
|
|
143
|
+
t
|
|
144
|
+
} = (0, import_react_i18next.useTranslation)();
|
|
145
|
+
var {
|
|
146
|
+
disabledState
|
|
147
|
+
} = (0, import_theme.useResolvedKnobs)({
|
|
148
|
+
component: "DataTable",
|
|
149
|
+
compact
|
|
150
|
+
});
|
|
72
151
|
if (!enableSorting && !enableFiltering) return null;
|
|
73
152
|
return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
|
|
74
153
|
alignItems: "center",
|
|
@@ -77,52 +156,10 @@ function DataTableCardControls(param) {
|
|
|
77
156
|
paddingVertical: "$2",
|
|
78
157
|
role: "toolbar",
|
|
79
158
|
"aria-label": t("Card list controls"),
|
|
80
|
-
children: [enableSorting &&
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
setSortMenuOpen(open);
|
|
85
|
-
},
|
|
86
|
-
children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu.Trigger, {
|
|
87
|
-
asChild: true,
|
|
88
|
-
children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
|
|
89
|
-
size: knobProps.sizeToken,
|
|
90
|
-
icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CaretUpDownIcon, {
|
|
91
|
-
size: chrome.iconPx
|
|
92
|
-
}),
|
|
93
|
-
"aria-label": t("Sort rows"),
|
|
94
|
-
disabled,
|
|
95
|
-
children: sortLabel
|
|
96
|
-
})
|
|
97
|
-
}), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.DropdownMenu.Content, {
|
|
98
|
-
children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu.Label, {
|
|
99
|
-
children: t("Sort by")
|
|
100
|
-
}), sortableColumns.map(function (column) {
|
|
101
|
-
var sorted = column.getIsSorted();
|
|
102
|
-
return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu.Item, {
|
|
103
|
-
closeOnSelect: false,
|
|
104
|
-
icon: sorted === "asc" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CaretDownIcon, {
|
|
105
|
-
size: chrome.iconPx
|
|
106
|
-
}) : sorted === "desc" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CaretDownIcon, {
|
|
107
|
-
size: chrome.iconPx,
|
|
108
|
-
style: {
|
|
109
|
-
transform: "rotate(180deg)"
|
|
110
|
-
}
|
|
111
|
-
}) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CaretUpDownIcon, {
|
|
112
|
-
size: chrome.iconPx
|
|
113
|
-
}),
|
|
114
|
-
"aria-label": (0, import_withInterp.withInterp)(t("Sort by {{column}}", {
|
|
115
|
-
column: getColumnLabel(column)
|
|
116
|
-
}), {
|
|
117
|
-
column: getColumnLabel(column)
|
|
118
|
-
}),
|
|
119
|
-
onSelect: function onSelect() {
|
|
120
|
-
if (sorted === false) column.toggleSorting(false);else if (sorted === "asc") column.toggleSorting(true);else column.clearSorting();
|
|
121
|
-
},
|
|
122
|
-
children: getColumnLabel(column)
|
|
123
|
-
}, column.id);
|
|
124
|
-
})]
|
|
125
|
-
})]
|
|
159
|
+
children: [enableSorting && /* @__PURE__ */(0, import_jsx_runtime.jsx)(DataTableCardSortControl, {
|
|
160
|
+
table,
|
|
161
|
+
compact,
|
|
162
|
+
disabled
|
|
126
163
|
}), enableFiltering && availableColumns.length > 0 &&
|
|
127
164
|
// DataTableFilters (chrome) has no disabled API — the wrapper is the
|
|
128
165
|
// LC-40 carrier and interaction gate for the disabled table.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","DataTableCardControls_exports","__export","DataTableCardControls","module","exports","import_jsx_runtime","require","import_react","import_components","import_forms","import_theme","import_react2","import_tamagui","import_react_i18next","import_withInterp","import_DataTableFilters","import_dataTableChrome","getColumnLabel","column","columnDef","header","id","param","table","
|
|
1
|
+
{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","DataTableCardControls_exports","__export","DataTableCardControls","DataTableCardSortControl","module","exports","import_jsx_runtime","require","import_react","import_components","import_forms","import_theme","import_react2","import_tamagui","import_react_i18next","import_withInterp","import_DataTableFilters","import_dataTableChrome","getColumnLabel","column","columnDef","header","id","param","table","compact","disabled","contained","_table_getState_sorting","t","useTranslation","knobProps","useResolvedKnobs","component","chrome","dataTableChrome","String","sizeToken","sortMenuOpen","setSortMenuOpen","useState","sortableColumns","getVisibleLeafColumns","filter","col","getCanSort","activeSort","getState","sorting","activeSortColumn","getColumn","sortLabel","desc","length","menu","jsxs","DropdownMenu","open","onOpenChange","children","jsx","Trigger","asChild","Button","size","icon","CaretUpDownIcon","iconPx","minWidth","maxWidth","Content","Label","map","sorted","getIsSorted","Item","closeOnSelect","CaretDownIcon","style","transform","withInterp","onSelect","toggleSorting","clearSorting","View","flexBasis","flexGrow","flexShrink","enableSorting","enableFiltering","availableColumns","disabledState","XStack","alignItems","flexWrap","gap","paddingVertical","role"],"sources":["../../../../src/components/DataTable/DataTableCardControls.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
|