@tanstack/table-devtools
Version:
Devtools for TanStack Table.
106 lines (104 loc) • 4.49 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 { For, Show, createMemo } from "solid-js";
import { className, createComponent, effect, insert, template } from "solid-js/web";
//#region src/components/ColumnsPanel.tsx
var _tmpl$ = /*#__PURE__*/ template(`<div><div>Columns (<!>)</div><div><table><thead><tr><th>#</th><th>id</th><th>depth</th><th>accessor</th><th>columnDef</th></tr></thead><tbody>`);
var _tmpl$2 = /*#__PURE__*/ template(`<tr><td></td><td></td><td></td><td></td><td>`);
function getColumnDefSummary(column) {
const def = column.columnDef;
const header = def.header;
const accessorKey = def.accessorKey;
const accessorFn = def.accessorFn;
const parts = [];
if (typeof accessorKey === "string") parts.push(`key: ${accessorKey}`);
if (typeof accessorFn === "function") parts.push("accessorFn");
if (header !== void 0) {
const headerStr = typeof header === "string" ? header : typeof header === "function" ? "[fn]" : String(header);
parts.push(`header: ${headerStr}`);
}
return parts.length > 0 ? parts.join(", ") : "-";
}
function ColumnsPanel() {
const styles = useStyles();
const { table } = useTableDevtoolsContext();
const optionsStoreValue = useTableStore(() => table()?.optionsStore, (options) => options);
const columns = createMemo(() => {
const tableInstance = table();
if (!tableInstance) return [];
optionsStoreValue();
const tableWithColumnFns = tableInstance;
return tableWithColumnFns.getAllFlatColumns?.() ?? tableWithColumnFns.getAllLeafColumns?.() ?? [];
});
return createComponent(Show, {
get fallback() {
return createComponent(NoTableConnected, { title: "Columns" });
},
get when() {
return table();
},
get children() {
var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$5 = _el$2.firstChild.nextSibling;
_el$5.nextSibling;
var _el$6 = _el$2.nextSibling, _el$7 = _el$6.firstChild, _el$8 = _el$7.firstChild, _el$0 = _el$8.firstChild.firstChild, _el$1 = _el$0.nextSibling, _el$10 = _el$1.nextSibling, _el$11 = _el$10.nextSibling, _el$12 = _el$11.nextSibling, _el$13 = _el$8.nextSibling;
insert(_el$2, () => columns().length, _el$5);
insert(_el$13, createComponent(For, {
get each() {
return columns();
},
children: (column, index) => (() => {
var _el$14 = _tmpl$2(), _el$15 = _el$14.firstChild, _el$16 = _el$15.nextSibling, _el$17 = _el$16.nextSibling, _el$18 = _el$17.nextSibling, _el$19 = _el$18.nextSibling;
insert(_el$15, () => index() + 1);
insert(_el$16, () => column.id);
insert(_el$17, () => column.depth);
insert(_el$18, () => column.accessorFn ? "✓" : "○");
insert(_el$19, () => getColumnDefSummary(column));
effect((_p$) => {
var _v$0 = styles().bodyCellMono, _v$1 = styles().bodyCellMono, _v$10 = styles().bodyCellMono, _v$11 = styles().bodyCellMono, _v$12 = styles().bodyCell;
_v$0 !== _p$.e && className(_el$15, _p$.e = _v$0);
_v$1 !== _p$.t && className(_el$16, _p$.t = _v$1);
_v$10 !== _p$.a && className(_el$17, _p$.a = _v$10);
_v$11 !== _p$.o && className(_el$18, _p$.o = _v$11);
_v$12 !== _p$.i && className(_el$19, _p$.i = _v$12);
return _p$;
}, {
e: void 0,
t: void 0,
a: void 0,
o: void 0,
i: void 0
});
return _el$14;
})()
}));
effect((_p$) => {
var _v$ = styles().panelScroll, _v$2 = styles().sectionTitle, _v$3 = styles().tableWrapper, _v$4 = styles().rowsTable, _v$5 = styles().headerCell, _v$6 = styles().headerCell, _v$7 = styles().headerCell, _v$8 = styles().headerCell, _v$9 = styles().headerCell;
_v$ !== _p$.e && className(_el$, _p$.e = _v$);
_v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
_v$3 !== _p$.a && className(_el$6, _p$.a = _v$3);
_v$4 !== _p$.o && className(_el$7, _p$.o = _v$4);
_v$5 !== _p$.i && className(_el$0, _p$.i = _v$5);
_v$6 !== _p$.n && className(_el$1, _p$.n = _v$6);
_v$7 !== _p$.s && className(_el$10, _p$.s = _v$7);
_v$8 !== _p$.h && className(_el$11, _p$.h = _v$8);
_v$9 !== _p$.r && className(_el$12, _p$.r = _v$9);
return _p$;
}, {
e: void 0,
t: void 0,
a: void 0,
o: void 0,
i: void 0,
n: void 0,
s: void 0,
h: void 0,
r: void 0
});
return _el$;
}
});
}
//#endregion
export { ColumnsPanel };