@marimo-team/islands 0.23.11-dev28 → 0.23.11-dev29
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/{code-visibility-BkNk8VeO.js → code-visibility-BtAh8-ga.js} +5 -5
- package/dist/main.js +6 -6
- package/dist/{reveal-component-C8gBbSKY.js → reveal-component-CiJIhe23.js} +1 -1
- package/package.json +1 -1
- package/src/components/data-table/TableTopBar.tsx +4 -4
- package/src/components/data-table/__tests__/data-table.test.tsx +28 -0
- package/src/components/data-table/data-table.tsx +3 -3
- package/src/plugins/impl/DataTablePlugin.tsx +4 -5
- package/src/plugins/impl/__tests__/DataTablePlugin.test.tsx +1 -1
- package/src/plugins/impl/data-frames/DataFramePlugin.tsx +1 -1
|
@@ -34027,7 +34027,7 @@ Database schema: ${n}`), (_a3 = t2.aiFix) == null ? void 0 : _a3.setAiCompletion
|
|
|
34027
34027
|
var NOOP_ON_SEARCH = () => {
|
|
34028
34028
|
};
|
|
34029
34029
|
let TableTopBar;
|
|
34030
|
-
TableTopBar = ({ table: e,
|
|
34030
|
+
TableTopBar = ({ table: e, showSearch: t, searchQuery: n, onSearchQueryChange: i, reloading: o, showChartBuilder: s, isChartBuilderOpen: c, toggleDisplayHeader: d, showTableExplorer: f, togglePanel: _, isAnyPanelOpen: v, downloadAs: y, sizeBytes: S, sizeBytesIsLoading: w }) => {
|
|
34031
34031
|
let [E, O] = (0, import_react.useState)(n || ""), A = useDebounce(E, 500), M = useEvent_default(i ?? NOOP_ON_SEARCH), I = import_react.useRef(null);
|
|
34032
34032
|
return (0, import_react.useEffect)(() => {
|
|
34033
34033
|
M(A);
|
|
@@ -34070,7 +34070,7 @@ Database schema: ${n}`), (_a3 = t2.aiFix) == null ? void 0 : _a3.setAiCompletion
|
|
|
34070
34070
|
]
|
|
34071
34071
|
}),
|
|
34072
34072
|
(0, import_jsx_runtime.jsxs)("div", {
|
|
34073
|
-
className: "flex items-center shrink-0",
|
|
34073
|
+
className: "flex items-center shrink-0 ml-auto",
|
|
34074
34074
|
children: [
|
|
34075
34075
|
(0, import_jsx_runtime.jsx)(ColumnVisibilityDropdown, {
|
|
34076
34076
|
table: e
|
|
@@ -34109,7 +34109,7 @@ Database schema: ${n}`), (_a3 = t2.aiFix) == null ? void 0 : _a3.setAiCompletion
|
|
|
34109
34109
|
]
|
|
34110
34110
|
});
|
|
34111
34111
|
};
|
|
34112
|
-
DataTable = (0, import_react.memo)(({ wrapperClassName: e, className: t, maxHeight: n, columns: i, data: o, rawData: s, selection: c, totalColumns: d, totalRows: f, sizeBytes: _, sizeBytesIsLoading: v, manualSorting: y = false, sorting: S, setSorting: w, rowSelection: E, cellSelection: O, cellStyling: A, hoverTemplate: M, cellHoverTexts: I, paginationState: z, setPaginationState: U, downloadAs: K, manualPagination: q = false, pagination: J = false, onRowSelectionChange: Q, onCellSelectionChange: $, getRowIds: Iq,
|
|
34112
|
+
DataTable = (0, import_react.memo)(({ wrapperClassName: e, className: t, maxHeight: n, columns: i, data: o, rawData: s, selection: c, totalColumns: d, totalRows: f, sizeBytes: _, sizeBytesIsLoading: v, manualSorting: y = false, sorting: S, setSorting: w, rowSelection: E, cellSelection: O, cellStyling: A, hoverTemplate: M, cellHoverTexts: I, paginationState: z, setPaginationState: U, downloadAs: K, manualPagination: q = false, pagination: J = false, onRowSelectionChange: Q, onCellSelectionChange: $, getRowIds: Iq, showSearch: Lq = false, searchQuery: Rq, onSearchQueryChange: zq, showFilters: Bq = false, filters: Vq, onFiltersChange: Hq, calculateTopKRows: Uq, reloading: Wq, freezeColumnsLeft: Gq, freezeColumnsRight: Kq, hiddenColumns: qq, toggleDisplayHeader: Jq, showChartBuilder: Yq, isChartBuilderOpen: Xq, showPageSizeSelector: Zq, showTableExplorer: Qq, togglePanel: $q, isPanelOpen: eJ, isAnyPanelOpen: tJ, viewedRowIdx: nJ, onViewedRowChange: rJ, renderTableExplorerPanel: iJ }) => {
|
|
34113
34113
|
let [aJ, oJ] = import_react.useState(false), { locale: sJ } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7(), { columnPinning: cJ, setColumnPinning: lJ } = useColumnPinning(Gq, Kq), { columnVisibility: uJ, setColumnVisibility: dJ } = useColumnVisibility(qq);
|
|
34114
34114
|
import_react.useEffect(() => {
|
|
34115
34115
|
let e2;
|
|
@@ -34227,7 +34227,7 @@ Database schema: ${n}`), (_a3 = t2.aiFix) == null ? void 0 : _a3.setAiCompletion
|
|
|
34227
34227
|
children: [
|
|
34228
34228
|
(0, import_jsx_runtime.jsx)(TableTopBar, {
|
|
34229
34229
|
table: pJ,
|
|
34230
|
-
|
|
34230
|
+
showSearch: Lq,
|
|
34231
34231
|
searchQuery: Rq,
|
|
34232
34232
|
onSearchQueryChange: zq,
|
|
34233
34233
|
reloading: Wq,
|
|
@@ -35996,7 +35996,7 @@ ${d}`,
|
|
|
35996
35996
|
return Logger.warn("Failed to get version from mount config"), null;
|
|
35997
35997
|
}
|
|
35998
35998
|
}
|
|
35999
|
-
marimoVersionAtom = atom(getVersionFromMountConfig() || "0.23.11-
|
|
35999
|
+
marimoVersionAtom = atom(getVersionFromMountConfig() || "0.23.11-dev29");
|
|
36000
36000
|
showCodeInRunModeAtom = atom(true);
|
|
36001
36001
|
atom(null);
|
|
36002
36002
|
var import_compiler_runtime = require_compiler_runtime();
|
package/dist/main.js
CHANGED
|
@@ -26,7 +26,7 @@ import { $ as reducer, B as safeExtractSetUIElementMessageBuffers, Bn as CircleA
|
|
|
26
26
|
import { __tla as __tla_1 } from "./chunk-5FQGJX7Z-BbqSm5gU.js";
|
|
27
27
|
import { o as useSize, s as Root$1, u as createLucideIcon } from "./dist-Dk6PV_d3.js";
|
|
28
28
|
import { A as SquareFunction, C as DEFAULT_COLOR_SCHEME, D as SCALE_TYPE_DESCRIPTIONS, E as EMPTY_VALUE$1, O as TIME_UNIT_DESCRIPTIONS, S as DEFAULT_AGGREGATION, T as DEFAULT_TIME_UNIT, _ as AGGREGATION_TYPE_DESCRIPTIONS, a as AGGREGATION_FNS$1, b as COLOR_SCHEMES, c as COLOR_BY_FIELDS, d as NONE_VALUE, f as SELECTABLE_DATA_TYPES, g as TIME_UNITS, h as STRING_AGGREGATION_FNS, i as convertDataTypeToSelectable, j as ChartColumn, k as escapeFieldName, l as COMBINED_TIME_UNITS, m as SORT_TYPES, n as createSpecWithoutData, o as BIN_AGGREGATION, p as SINGLE_TIME_UNITS, r as isFieldSet, s as CHART_TYPES, t as augmentSpecWithData, u as ChartType, v as AGGREGATION_TYPE_ICON, w as DEFAULT_MAX_BINS_FACET, x as COUNT_FIELD, y as CHART_TYPE_ICON } from "./spec-f8-xgaui.js";
|
|
29
|
-
import { $ as contextAwarePanelOpen, $t as $fae977aafc393c5c$export$6b862160d295c8e, A as prettifyRowCount, At as SELECT_COLUMN_ID, B as DatePicker, Bt as TabsContent, C as downloadSizeLimitAtom, Ct as DelayMount, D as ErrorState, Dt as loadTableAndRawData, E as EmptyState, Et as getPageIndexForRow, F as ContextMenuSeparator, Ft as Maps, G as CommandEmpty, Gt as ChartLoadingState, H as Combobox, Ht as TabsTrigger, I as ContextMenuTrigger, It as dateToLocalISODate, J as CommandList, Jt as RenderTextWithLinks, K as CommandInput, Kt as LazyVegaEmbed, L as useInternalStateWithSync, Lt as dateToLocalISODateTime, M as ContextMenu, Mt as toFieldTypes, N as ContextMenuContent, Nt as getMimeValues, O as LoadingState, Ot as loadTableData, P as ContextMenuItem, Pt as isNullishFilter, Q as PANEL_TYPES, Qt as $fae977aafc393c5c$export$588937bcd60ade55, R as useSelectList, Rt as dateToLocalISOTime, S as Filenames, St as ColumnChartSpecModel, T as ColumnPreviewContainer, Tt as usePrevious$1, U as ComboboxItem, Ut as ChartErrorState, V as DateRangePicker, Vt as TabsList, W as Command, Wt as ChartInfoState, X as smartMatch, Xt as HtmlOutput, Y as CommandSeparator, Yt as Kbd, Z as ContextAwarePanelItem, Zt as EmotionCacheProvider, _ as ADD_PRINTING_CLASS, _t as NAMELESS_COLUMN_PREFIX, an as Ellipsis, at as Toggle, b as downloadHTMLAsImage, bt as renderCellValue, c as Slide, cn as ChevronsUpDown, d as RadioGroupItem, dn as ChevronsDownUp, dt as Table, en as TextWrap, et as contextAwarePanelOwner, f as JsonOutput, fn as ChevronLeft, ft as TableBody, g as InstallPackageButton, gt as TableRow, h as DataTable, ht as TableHeader, it as slotsController, j as getColumnCountForDisplay, jt as TOO_MANY_ROWS, k as prettifyRowColumnCount, kt as INDEX_COLUMN_NAME, l as Switch, ln as ChevronsRight, lt as Fill, m as OutputRenderer, mt as TableHead, n as marimoVersionAtom, nn as Funnel, nt as isCellAwareAtom, o as SLIDE_TYPE_OPTIONS_BY_VALUE, on as Download, p as OutputArea, pn as ArrowDownWideNarrow, pt as TableCell, q as CommandItem, qt as useOverflowDetection, r as showCodeInRunModeAtom, rn as EyeOff, rt as SlotNames, sn as Code, t as useNotebookCodeAvailable, tn as GripHorizontal, tt as contextAwarePanelType, u as RadioGroup, un as ChevronsLeft, ut as Provider$1, v as downloadBlob, vt as generateColumns, w as ColumnName, wt as useIntersectionObserver, x as Progress, xt as ColumnChartContext, y as downloadByURL, yt as inferFieldTypes, z as CompactChipRow, zt as Tabs, __tla as __tla_2 } from "./code-visibility-
|
|
29
|
+
import { $ as contextAwarePanelOpen, $t as $fae977aafc393c5c$export$6b862160d295c8e, A as prettifyRowCount, At as SELECT_COLUMN_ID, B as DatePicker, Bt as TabsContent, C as downloadSizeLimitAtom, Ct as DelayMount, D as ErrorState, Dt as loadTableAndRawData, E as EmptyState, Et as getPageIndexForRow, F as ContextMenuSeparator, Ft as Maps, G as CommandEmpty, Gt as ChartLoadingState, H as Combobox, Ht as TabsTrigger, I as ContextMenuTrigger, It as dateToLocalISODate, J as CommandList, Jt as RenderTextWithLinks, K as CommandInput, Kt as LazyVegaEmbed, L as useInternalStateWithSync, Lt as dateToLocalISODateTime, M as ContextMenu, Mt as toFieldTypes, N as ContextMenuContent, Nt as getMimeValues, O as LoadingState, Ot as loadTableData, P as ContextMenuItem, Pt as isNullishFilter, Q as PANEL_TYPES, Qt as $fae977aafc393c5c$export$588937bcd60ade55, R as useSelectList, Rt as dateToLocalISOTime, S as Filenames, St as ColumnChartSpecModel, T as ColumnPreviewContainer, Tt as usePrevious$1, U as ComboboxItem, Ut as ChartErrorState, V as DateRangePicker, Vt as TabsList, W as Command, Wt as ChartInfoState, X as smartMatch, Xt as HtmlOutput, Y as CommandSeparator, Yt as Kbd, Z as ContextAwarePanelItem, Zt as EmotionCacheProvider, _ as ADD_PRINTING_CLASS, _t as NAMELESS_COLUMN_PREFIX, an as Ellipsis, at as Toggle, b as downloadHTMLAsImage, bt as renderCellValue, c as Slide, cn as ChevronsUpDown, d as RadioGroupItem, dn as ChevronsDownUp, dt as Table, en as TextWrap, et as contextAwarePanelOwner, f as JsonOutput, fn as ChevronLeft, ft as TableBody, g as InstallPackageButton, gt as TableRow, h as DataTable, ht as TableHeader, it as slotsController, j as getColumnCountForDisplay, jt as TOO_MANY_ROWS, k as prettifyRowColumnCount, kt as INDEX_COLUMN_NAME, l as Switch, ln as ChevronsRight, lt as Fill, m as OutputRenderer, mt as TableHead, n as marimoVersionAtom, nn as Funnel, nt as isCellAwareAtom, o as SLIDE_TYPE_OPTIONS_BY_VALUE, on as Download, p as OutputArea, pn as ArrowDownWideNarrow, pt as TableCell, q as CommandItem, qt as useOverflowDetection, r as showCodeInRunModeAtom, rn as EyeOff, rt as SlotNames, sn as Code, t as useNotebookCodeAvailable, tn as GripHorizontal, tt as contextAwarePanelType, u as RadioGroup, un as ChevronsLeft, ut as Provider$1, v as downloadBlob, vt as generateColumns, w as ColumnName, wt as useIntersectionObserver, x as Progress, xt as ColumnChartContext, y as downloadByURL, yt as inferFieldTypes, z as CompactChipRow, zt as Tabs, __tla as __tla_2 } from "./code-visibility-BtAh8-ga.js";
|
|
30
30
|
import { c as Calendar, i as createReducerAndAtoms, n as useOnUnmount, o as ToggleLeft, t as useOnMount } from "./useLifecycle-B3NOEiY5.js";
|
|
31
31
|
import { t as Check } from "./check-BCaJeT-J.js";
|
|
32
32
|
import { A as Icon, C as logNever, D as $18f2051aff69b9bf$export$a54013f0d02a8f82, E as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7, F as createCollection, I as X, M as clamp$2, N as usePrevious$2, P as useDirection, R as ChevronDown, S as assertNever, a as SelectGroup, c as SelectSeparator, d as NativeSelect, i as SelectContent, j as Trigger$1, l as SelectTrigger, n as capitalize, o as SelectItem, r as Select, s as SelectLabel, t as Strings, u as SelectValue, w as $a916eb452884faea$export$b7a616150fdb9f44 } from "./strings-J57tzLr3.js";
|
|
@@ -14152,6 +14152,7 @@ ${c}
|
|
|
14152
14152
|
showColumnExplorer: boolean().default(true),
|
|
14153
14153
|
showRowExplorer: boolean().default(true),
|
|
14154
14154
|
showChartBuilder: boolean().default(true),
|
|
14155
|
+
showSearch: boolean().default(true),
|
|
14155
14156
|
rowHeaders: columnToFieldTypesSchema,
|
|
14156
14157
|
freezeColumnsLeft: array(string()).optional(),
|
|
14157
14158
|
freezeColumnsRight: array(string()).optional(),
|
|
@@ -14262,7 +14263,6 @@ ${c}
|
|
|
14262
14263
|
...e.data,
|
|
14263
14264
|
...e.functions,
|
|
14264
14265
|
host: e.host,
|
|
14265
|
-
enableSearch: true,
|
|
14266
14266
|
data: e.data.data,
|
|
14267
14267
|
value: e.value,
|
|
14268
14268
|
setValue: e.setValue,
|
|
@@ -14520,7 +14520,7 @@ ${c}
|
|
|
14520
14520
|
}), r[115] = _W, r[116] = OW, r[117] = kW) : kW = r[117], kW;
|
|
14521
14521
|
});
|
|
14522
14522
|
LoadingDataTableComponent.displayName = "LoadingDataTableComponent";
|
|
14523
|
-
var DataTableComponent = ({ label: e, data: r, rawData: c, totalRows: l, sizeBytes: u, sizeBytesIsLoading: d, maxColumns: f, pagination: p, selection: m, value: h, showFilters: g, showDownload: _, showPageSizeSelector: v, showColumnExplorer: y, showRowExplorer: b, showChartBuilder: S, showDataTypes: w, rowHeaders: T, fieldTypes: O, paginationState: j, setPaginationState: M, download_as: I, columnSummaries: L, className: R, setValue: z, sorting: B, setSorting: H,
|
|
14523
|
+
var DataTableComponent = ({ label: e, data: r, rawData: c, totalRows: l, sizeBytes: u, sizeBytesIsLoading: d, maxColumns: f, pagination: p, selection: m, value: h, showFilters: g, showDownload: _, showPageSizeSelector: v, showColumnExplorer: y, showRowExplorer: b, showChartBuilder: S, showDataTypes: w, rowHeaders: T, fieldTypes: O, paginationState: j, setPaginationState: M, download_as: I, columnSummaries: L, className: R, setValue: z, sorting: B, setSorting: H, showSearch: W, searchQuery: G, setSearchQuery: q, filters: qU, setFilters: Z, reloading: JU, freezeColumnsLeft: YU, freezeColumnsRight: XU, hiddenColumns: ZU, textJustifyColumns: QU, wrappedColumns: $U, columnWidths: eW, headerTooltip: tW, totalColumns: nW, get_row_ids: rW, cellStyles: iW, hoverTemplate: aW, cellHoverTexts: oW, toggleDisplayHeader: sW, isChartBuilderOpen: cW, calculate_top_k_rows: lW, preview_column: uW, getRow: dW, cellId: fW, maxHeight: pW }) => {
|
|
14524
14524
|
let mW = (0, import_react.useId)(), [hW, gW] = (0, import_react.useState)(0), { isPanelOpen: _W, isAnyPanelOpen: vW, togglePanel: yW, panelType: bW, setPanelType: xW } = usePanelOwnership(mW, fW), SW = (0, import_react.useMemo)(() => {
|
|
14525
14525
|
if (!L || !O || !L.stats) return ColumnChartSpecModel.EMPTY;
|
|
14526
14526
|
let e2 = toFieldTypes(O);
|
|
@@ -14695,7 +14695,7 @@ ${c}
|
|
|
14695
14695
|
hoverTemplate: aW,
|
|
14696
14696
|
cellHoverTexts: oW,
|
|
14697
14697
|
downloadAs: _ ? I : void 0,
|
|
14698
|
-
|
|
14698
|
+
showSearch: W,
|
|
14699
14699
|
searchQuery: G,
|
|
14700
14700
|
onSearchQueryChange: q,
|
|
14701
14701
|
showFilters: g,
|
|
@@ -16923,7 +16923,7 @@ ${c}
|
|
|
16923
16923
|
showDownload: u,
|
|
16924
16924
|
download_as: _,
|
|
16925
16925
|
get_size_bytes: v,
|
|
16926
|
-
|
|
16926
|
+
showSearch: false,
|
|
16927
16927
|
showFilters: false,
|
|
16928
16928
|
search: g,
|
|
16929
16929
|
showColumnSummaries: false,
|
|
@@ -36190,7 +36190,7 @@ ${c}
|
|
|
36190
36190
|
function _temp2$2(e) {
|
|
36191
36191
|
e.target === e.currentTarget && e.key === "Enter" && (e.preventDefault(), e.stopPropagation(), e.currentTarget.click());
|
|
36192
36192
|
}
|
|
36193
|
-
var LazySlidesComponent = import_react.lazy(() => import("./reveal-component-
|
|
36193
|
+
var LazySlidesComponent = import_react.lazy(() => import("./reveal-component-CiJIhe23.js"));
|
|
36194
36194
|
const SlidesLayoutRenderer = ({ layout: e, setLayout: r, cells: c, mode: l }) => {
|
|
36195
36195
|
var _a3;
|
|
36196
36196
|
let u = useAtomValue(kioskModeAtom), d = l === "read" || u, f = useAtomValue(numColumnsAtom) > 1, [p, m] = (0, import_react.useState)(null), { slideCells: h, skippedIds: g, noOutputIds: _, slideTypes: v, startCellIndex: y } = (0, import_react.useMemo)(() => computeSlideCellsInfo(c, e), [
|
|
@@ -9,7 +9,7 @@ import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
|
|
|
9
9
|
import { lt as kioskModeAtom } from "./html-to-image-BJbLjZyG.js";
|
|
10
10
|
import "./chunk-5FQGJX7Z-BbqSm5gU.js";
|
|
11
11
|
import { u as createLucideIcon } from "./dist-Dk6PV_d3.js";
|
|
12
|
-
import { a as DEFAULT_SLIDE_TYPE, c as Slide, ct as PanelResizeHandle, i as DEFAULT_DECK_TRANSITION, in as Expand, ot as Panel, rn as EyeOff, s as SlideSidebar, sn as Code, st as PanelGroup, t as useNotebookCodeAvailable } from "./code-visibility-
|
|
12
|
+
import { a as DEFAULT_SLIDE_TYPE, c as Slide, ct as PanelResizeHandle, i as DEFAULT_DECK_TRANSITION, in as Expand, ot as Panel, rn as EyeOff, s as SlideSidebar, sn as Code, st as PanelGroup, t as useNotebookCodeAvailable } from "./code-visibility-BtAh8-ga.js";
|
|
13
13
|
import { X as useDebouncedCallback } from "./input-Cn-SZdXY.js";
|
|
14
14
|
import "./toDate-B4-pUFYh.js";
|
|
15
15
|
import "./react-dom-BTJzcVJ9.js";
|
package/package.json
CHANGED
|
@@ -27,7 +27,7 @@ const NOOP_ON_SEARCH = () => {
|
|
|
27
27
|
|
|
28
28
|
interface TableTopBarProps<TData> extends Partial<ExportActionProps> {
|
|
29
29
|
table: Table<TData>;
|
|
30
|
-
|
|
30
|
+
showSearch: boolean;
|
|
31
31
|
searchQuery?: string;
|
|
32
32
|
onSearchQueryChange?: (query: string) => void;
|
|
33
33
|
reloading?: boolean;
|
|
@@ -43,7 +43,7 @@ interface TableTopBarProps<TData> extends Partial<ExportActionProps> {
|
|
|
43
43
|
|
|
44
44
|
export const TableTopBar = <TData,>({
|
|
45
45
|
table,
|
|
46
|
-
|
|
46
|
+
showSearch,
|
|
47
47
|
searchQuery,
|
|
48
48
|
onSearchQueryChange,
|
|
49
49
|
reloading,
|
|
@@ -68,7 +68,7 @@ export const TableTopBar = <TData,>({
|
|
|
68
68
|
|
|
69
69
|
return (
|
|
70
70
|
<div className="flex items-center h-10 px-2 border-b gap-2">
|
|
71
|
-
{onSearchQueryChange &&
|
|
71
|
+
{onSearchQueryChange && showSearch && (
|
|
72
72
|
<div className="flex flex-1 items-center gap-1 px-2 rounded-sm focus-within:ring-1 focus-within:ring-border transition-shadow">
|
|
73
73
|
<SearchIcon className="w-4 h-4 text-muted-foreground shrink-0" />
|
|
74
74
|
<input
|
|
@@ -99,7 +99,7 @@ export const TableTopBar = <TData,>({
|
|
|
99
99
|
</div>
|
|
100
100
|
)}
|
|
101
101
|
|
|
102
|
-
<div className="flex items-center shrink-0">
|
|
102
|
+
<div className="flex items-center shrink-0 ml-auto">
|
|
103
103
|
<ColumnVisibilityDropdown table={table} />
|
|
104
104
|
{showChartBuilder && (
|
|
105
105
|
<Button
|
|
@@ -69,6 +69,34 @@ describe("DataTable", () => {
|
|
|
69
69
|
expect(commonProps.rowSelection).toEqual(initialRowSelection);
|
|
70
70
|
});
|
|
71
71
|
|
|
72
|
+
it("hides the search bar when showSearch is false", () => {
|
|
73
|
+
const columns: ColumnDef<TestData>[] = [
|
|
74
|
+
{ accessorKey: "name", header: "Name" },
|
|
75
|
+
];
|
|
76
|
+
const commonProps = {
|
|
77
|
+
data: [{ id: 1, name: "Test 1" }] as TestData[],
|
|
78
|
+
columns,
|
|
79
|
+
totalRows: 1,
|
|
80
|
+
totalColumns: 1,
|
|
81
|
+
pagination: false,
|
|
82
|
+
onSearchQueryChange: () => {},
|
|
83
|
+
};
|
|
84
|
+
|
|
85
|
+
const { rerender } = render(
|
|
86
|
+
<TooltipProvider>
|
|
87
|
+
<DataTable {...commonProps} showSearch={true} />
|
|
88
|
+
</TooltipProvider>,
|
|
89
|
+
);
|
|
90
|
+
expect(screen.queryByPlaceholderText("Search...")).not.toBeNull();
|
|
91
|
+
|
|
92
|
+
rerender(
|
|
93
|
+
<TooltipProvider>
|
|
94
|
+
<DataTable {...commonProps} showSearch={false} />
|
|
95
|
+
</TooltipProvider>,
|
|
96
|
+
);
|
|
97
|
+
expect(screen.queryByPlaceholderText("Search...")).toBeNull();
|
|
98
|
+
});
|
|
99
|
+
|
|
72
100
|
it("shows the hoverTemplate text as a styled tooltip on hover", async () => {
|
|
73
101
|
vi.useFakeTimers();
|
|
74
102
|
interface RowData {
|
|
@@ -104,7 +104,7 @@ interface DataTableProps<TData> extends Partial<ExportActionProps> {
|
|
|
104
104
|
onCellSelectionChange?: OnChangeFn<CellSelectionState>;
|
|
105
105
|
getRowIds?: GetRowIds;
|
|
106
106
|
// Search
|
|
107
|
-
|
|
107
|
+
showSearch?: boolean;
|
|
108
108
|
searchQuery?: string;
|
|
109
109
|
onSearchQueryChange?: (query: string) => void;
|
|
110
110
|
showFilters?: boolean;
|
|
@@ -159,7 +159,7 @@ const DataTableInternal = <TData,>({
|
|
|
159
159
|
onRowSelectionChange,
|
|
160
160
|
onCellSelectionChange,
|
|
161
161
|
getRowIds,
|
|
162
|
-
|
|
162
|
+
showSearch = false,
|
|
163
163
|
searchQuery,
|
|
164
164
|
onSearchQueryChange,
|
|
165
165
|
showFilters = false,
|
|
@@ -357,7 +357,7 @@ const DataTableInternal = <TData,>({
|
|
|
357
357
|
>
|
|
358
358
|
<TableTopBar
|
|
359
359
|
table={table}
|
|
360
|
-
|
|
360
|
+
showSearch={showSearch}
|
|
361
361
|
searchQuery={searchQuery}
|
|
362
362
|
onSearchQueryChange={onSearchQueryChange}
|
|
363
363
|
reloading={reloading}
|
|
@@ -181,6 +181,7 @@ interface Data<T> {
|
|
|
181
181
|
maxHeight?: number;
|
|
182
182
|
selection: DataTableSelection;
|
|
183
183
|
showDownload: boolean;
|
|
184
|
+
showSearch: boolean;
|
|
184
185
|
showFilters: boolean;
|
|
185
186
|
showColumnSummaries: boolean | "stats" | "chart";
|
|
186
187
|
showDataTypes: boolean;
|
|
@@ -267,6 +268,7 @@ export const DataTablePlugin = createPlugin<S>("marimo-table")
|
|
|
267
268
|
showColumnExplorer: z.boolean().default(true),
|
|
268
269
|
showRowExplorer: z.boolean().default(true),
|
|
269
270
|
showChartBuilder: z.boolean().default(true),
|
|
271
|
+
showSearch: z.boolean().default(true),
|
|
270
272
|
rowHeaders: columnToFieldTypesSchema,
|
|
271
273
|
freezeColumnsLeft: z.array(z.string()).optional(),
|
|
272
274
|
freezeColumnsRight: z.array(z.string()).optional(),
|
|
@@ -385,7 +387,6 @@ export const DataTablePlugin = createPlugin<S>("marimo-table")
|
|
|
385
387
|
{...props.data}
|
|
386
388
|
{...props.functions}
|
|
387
389
|
host={props.host}
|
|
388
|
-
enableSearch={true}
|
|
389
390
|
data={props.data.data}
|
|
390
391
|
value={props.value}
|
|
391
392
|
setValue={props.setValue}
|
|
@@ -470,8 +471,6 @@ interface DataTableProps<T> extends Data<T>, DataTableFunctions {
|
|
|
470
471
|
// Selection
|
|
471
472
|
value: S;
|
|
472
473
|
setValue: (value: S) => void;
|
|
473
|
-
// Search
|
|
474
|
-
enableSearch: boolean;
|
|
475
474
|
// Filters
|
|
476
475
|
enableFilters?: boolean;
|
|
477
476
|
cellStyles?: CellStyleState | null;
|
|
@@ -841,7 +840,7 @@ const DataTableComponent = ({
|
|
|
841
840
|
setValue,
|
|
842
841
|
sorting,
|
|
843
842
|
setSorting,
|
|
844
|
-
|
|
843
|
+
showSearch,
|
|
845
844
|
searchQuery,
|
|
846
845
|
setSearchQuery,
|
|
847
846
|
filters,
|
|
@@ -1146,7 +1145,7 @@ const DataTableComponent = ({
|
|
|
1146
1145
|
hoverTemplate={hoverTemplate}
|
|
1147
1146
|
cellHoverTexts={cellHoverTexts}
|
|
1148
1147
|
downloadAs={showDownload ? downloadAs : undefined}
|
|
1149
|
-
|
|
1148
|
+
showSearch={showSearch}
|
|
1150
1149
|
searchQuery={searchQuery}
|
|
1151
1150
|
onSearchQueryChange={setSearchQuery}
|
|
1152
1151
|
showFilters={showFilters}
|
|
@@ -94,7 +94,7 @@ describe("LoadingDataTableComponent", () => {
|
|
|
94
94
|
hasStableRowId: false,
|
|
95
95
|
lazy: false,
|
|
96
96
|
host,
|
|
97
|
-
|
|
97
|
+
showSearch: true,
|
|
98
98
|
value: [] as (number | string | { rowId: string; columnName?: string })[],
|
|
99
99
|
setValue,
|
|
100
100
|
download_as: vi.fn() as DownloadAsArgs,
|
|
@@ -338,7 +338,7 @@ export const DataFrameComponent = memo(
|
|
|
338
338
|
showDownload={showDownload}
|
|
339
339
|
download_as={download_as}
|
|
340
340
|
get_size_bytes={get_size_bytes}
|
|
341
|
-
|
|
341
|
+
showSearch={false}
|
|
342
342
|
showFilters={false}
|
|
343
343
|
search={search}
|
|
344
344
|
showColumnSummaries={false}
|