@tanstack/table-devtools
Version:
Devtools for TanStack Table.
243 lines (241 loc) • 8.34 kB
JavaScript
import { useTableDevtoolsContext } from "../TableContextProvider.js";
import { useStyles } from "../styles/use-styles.js";
import { useTableStore } from "../useTableStore.js";
import { NoTableConnected } from "./NoTableConnected.js";
import { ResizableSplit } from "./ResizableSplit.js";
import { For, Show, createEffect, createMemo, createSignal } from "solid-js";
import { className, createComponent, effect, insert, memo, template } from "solid-js/web";
import { JsonTree } from "@tanstack/devtools-ui";
//#region src/components/RowsPanel.tsx
var _tmpl$ = /*#__PURE__*/ template(`<div>`);
var _tmpl$2 = /*#__PURE__*/ template(`<div>Raw Data`);
var _tmpl$3 = /*#__PURE__*/ template(`<span> (First 100 rows)`);
var _tmpl$4 = /*#__PURE__*/ template(`<div>Rows (<!>)`);
var _tmpl$5 = /*#__PURE__*/ template(`<div><label for=row-model-select>View:</label><select id=row-model-select>`);
var _tmpl$6 = /*#__PURE__*/ template(`<div><table><thead><tr><th>#</th></tr></thead><tbody>`);
var _tmpl$7 = /*#__PURE__*/ template(`<span> — First 100 rows`);
var _tmpl$8 = /*#__PURE__*/ template(`<option>`);
var _tmpl$9 = /*#__PURE__*/ template(`<th>`);
var _tmpl$0 = /*#__PURE__*/ template(`<tr><td>`);
var _tmpl$1 = /*#__PURE__*/ template(`<td>`);
const ROW_LIMIT = 100;
const ROW_MODEL_GETTERS = [
"getRowModel",
"getCoreRowModel",
"getFilteredRowModel",
"getGroupedRowModel",
"getSortedRowModel",
"getExpandedRowModel",
"getPaginatedRowModel"
];
function stringifyValue(value) {
if (value == null) return "";
if (typeof value === "string") return value;
if (typeof value === "number" || typeof value === "boolean") return String(value);
if (value instanceof Date) return value.toISOString();
try {
return JSON.stringify(value);
} catch {
return String(value);
}
}
function RowsPanel() {
const styles = useStyles();
const { table } = useTableDevtoolsContext();
const tableState = useTableStore(() => table()?.store, (state) => state);
const optionsStoreValue = useTableStore(() => table()?.optionsStore, (options) => options);
const [selectedRowModel, setSelectedRowModel] = createSignal("getRowModel");
const rawData = createMemo(() => {
const tableInstance = table();
if (!tableInstance) return void 0;
optionsStoreValue();
const data = tableInstance.options.data;
if (!Array.isArray(data)) return data;
if (data.length <= ROW_LIMIT) return data;
return data.slice(0, ROW_LIMIT);
});
const rawDataTotalCount = createMemo(() => {
const tableInstance = table();
if (!tableInstance) return 0;
optionsStoreValue();
const data = tableInstance.options.data;
return Array.isArray(data) ? data.length : 0;
});
const columns = createMemo(() => {
const tableInstance = table();
if (!tableInstance) return [];
tableState();
optionsStoreValue();
const tableWithColumnFns = tableInstance;
return tableWithColumnFns.getVisibleLeafColumns?.() ?? tableWithColumnFns.getAllLeafColumns?.() ?? [];
});
const availableGetters = createMemo(() => {
const tableInstance = table();
if (!tableInstance) return [];
const tableRecord = tableInstance;
return ROW_MODEL_GETTERS.filter((name) => typeof tableRecord[name] === "function");
});
createEffect(() => {
const getters = availableGetters();
if (getters.length === 0) return;
const currentGetter = selectedRowModel();
if (!getters.includes(currentGetter)) setSelectedRowModel(getters[0]);
});
const allRows = createMemo(() => {
const tableInstance = table();
if (!tableInstance) return [];
tableState();
const getter = tableInstance[selectedRowModel()];
return getter?.().rows ?? [];
});
const rows = createMemo(() => {
const nextRows = allRows();
if (nextRows.length <= ROW_LIMIT) return nextRows;
return nextRows.slice(0, ROW_LIMIT);
});
const rowsTotalCount = createMemo(() => allRows().length);
const getCells = (row) => {
return row.getVisibleCells?.() ?? row.getAllCells();
};
return createComponent(Show, {
get fallback() {
return createComponent(NoTableConnected, { title: "Rows" });
},
get when() {
return table();
},
get children() {
var _el$ = _tmpl$();
insert(_el$, createComponent(ResizableSplit, {
get left() {
return [(() => {
var _el$2 = _tmpl$2();
_el$2.firstChild;
insert(_el$2, (() => {
var _c$ = memo(() => rawDataTotalCount() > ROW_LIMIT);
return () => _c$() && (() => {
var _el$4 = _tmpl$3();
effect(() => className(_el$4, styles().rowLimitNote));
return _el$4;
})();
})(), null);
effect(() => className(_el$2, styles().sectionTitle));
return _el$2;
})(), createComponent(JsonTree, {
copyable: true,
get value() {
return rawData();
}
})];
},
get right() {
return [
(() => {
var _el$5 = _tmpl$4(), _el$8 = _el$5.firstChild.nextSibling;
_el$8.nextSibling;
insert(_el$5, () => rows().length, _el$8);
insert(_el$5, (() => {
var _c$2 = memo(() => rowsTotalCount() > ROW_LIMIT);
return () => _c$2() && ` of ${rowsTotalCount()}`;
})(), _el$8);
insert(_el$5, (() => {
var _c$3 = memo(() => rowsTotalCount() > ROW_LIMIT);
return () => _c$3() && (() => {
var _el$16 = _tmpl$7();
effect(() => className(_el$16, styles().rowLimitNote));
return _el$16;
})();
})(), null);
effect(() => className(_el$5, styles().sectionTitle));
return _el$5;
})(),
(() => {
var _el$9 = _tmpl$5(), _el$1 = _el$9.firstChild.nextSibling;
_el$1.addEventListener("change", (e) => setSelectedRowModel(e.currentTarget.value));
insert(_el$1, createComponent(For, {
get each() {
return availableGetters();
},
children: (getterName) => (() => {
var _el$17 = _tmpl$8();
_el$17.value = getterName;
insert(_el$17, getterName);
return _el$17;
})()
}));
effect((_p$) => {
var _v$ = styles().rowModelSelectRow, _v$2 = styles().rowModelSelect;
_v$ !== _p$.e && className(_el$9, _p$.e = _v$);
_v$2 !== _p$.t && className(_el$1, _p$.t = _v$2);
return _p$;
}, {
e: void 0,
t: void 0
});
effect(() => _el$1.value = selectedRowModel());
return _el$9;
})(),
(() => {
var _el$10 = _tmpl$6(), _el$11 = _el$10.firstChild, _el$12 = _el$11.firstChild, _el$13 = _el$12.firstChild, _el$14 = _el$13.firstChild, _el$15 = _el$12.nextSibling;
insert(_el$13, createComponent(For, {
get each() {
return columns();
},
children: (column) => (() => {
var _el$18 = _tmpl$9();
insert(_el$18, () => column.id);
effect(() => className(_el$18, styles().headerCell));
return _el$18;
})()
}), null);
insert(_el$15, createComponent(For, {
get each() {
return rows();
},
children: (row) => {
const cells = createMemo(() => {
tableState();
return getCells(row);
});
return (() => {
var _el$19 = _tmpl$0(), _el$20 = _el$19.firstChild;
insert(_el$20, () => row.id);
insert(_el$19, createComponent(For, {
get each() {
return cells();
},
children: (cell) => (() => {
var _el$21 = _tmpl$1();
insert(_el$21, () => stringifyValue(cell.getValue()));
effect(() => className(_el$21, styles().bodyCell));
return _el$21;
})()
}), null);
effect(() => className(_el$20, styles().bodyCellMono));
return _el$19;
})();
}
}));
effect((_p$) => {
var _v$3 = styles().tableWrapper, _v$4 = styles().rowsTable, _v$5 = styles().headerCell;
_v$3 !== _p$.e && className(_el$10, _p$.e = _v$3);
_v$4 !== _p$.t && className(_el$11, _p$.t = _v$4);
_v$5 !== _p$.a && className(_el$14, _p$.a = _v$5);
return _p$;
}, {
e: void 0,
t: void 0,
a: void 0
});
return _el$10;
})()
];
}
}));
effect(() => className(_el$, styles().panelScroll));
return _el$;
}
});
}
//#endregion
export { RowsPanel };