@vuu-ui/vuu-datatable 0.13.114 → 0.13.115-alpha.2
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/cjs/json-table/JsonCell.js +2 -5
- package/cjs/json-table/JsonCell.js.map +1 -1
- package/cjs/tree-table/TreeTable.js +0 -18
- package/cjs/tree-table/TreeTable.js.map +1 -1
- package/esm/json-table/JsonCell.js +2 -5
- package/esm/json-table/JsonCell.js.map +1 -1
- package/esm/tree-table/TreeTable.js +0 -18
- package/esm/tree-table/TreeTable.js.map +1 -1
- package/package.json +11 -11
- package/types/json-table/JsonCell.d.ts +1 -1
|
@@ -1,14 +1,12 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var vuuUtils = require('@vuu-ui/vuu-utils');
|
|
5
4
|
var styles = require('@salt-ds/styles');
|
|
6
5
|
var window = require('@salt-ds/window');
|
|
7
6
|
var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
|
|
8
7
|
var JsonCell$1 = require('./JsonCell.css.js');
|
|
9
8
|
|
|
10
|
-
const {
|
|
11
|
-
const JsonCell = ({ column, columnMap, row }) => {
|
|
9
|
+
const JsonCell = ({ column, dataRow }) => {
|
|
12
10
|
const targetWindow = window.useWindow();
|
|
13
11
|
styles.useComponentCssInjection({
|
|
14
12
|
testId: "vuu-array-cell",
|
|
@@ -16,8 +14,7 @@ const JsonCell = ({ column, columnMap, row }) => {
|
|
|
16
14
|
window: targetWindow
|
|
17
15
|
});
|
|
18
16
|
const { name } = column;
|
|
19
|
-
|
|
20
|
-
let { [IS_EXPANDED]: isExpanded, [IS_LEAF]: isLeaf, [dataIdx]: value } = row;
|
|
17
|
+
let { isExpanded, isLeaf, [name]: value } = dataRow;
|
|
21
18
|
const getDisplayValue = () => {
|
|
22
19
|
if (isLeaf) {
|
|
23
20
|
return value;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JsonCell.js","sources":["../../../../packages/vuu-datatable/src/json-table/JsonCell.tsx"],"sourcesContent":["import { TableCellProps } from \"@vuu-ui/vuu-table-types\";\nimport {
|
|
1
|
+
{"version":3,"file":"JsonCell.js","sources":["../../../../packages/vuu-datatable/src/json-table/JsonCell.tsx"],"sourcesContent":["import { TableCellProps } from \"@vuu-ui/vuu-table-types\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ToggleIconButton } from \"@vuu-ui/vuu-ui-controls\";\n\n// Note the className is actually applied to containing cell\nimport arrayCellCss from \"./JsonCell.css\";\n\nexport const JsonCell = ({ column, dataRow }: TableCellProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-array-cell\",\n css: arrayCellCss,\n window: targetWindow,\n });\n\n const { name } = column;\n let { isExpanded, isLeaf, [name]: value } = dataRow;\n\n const getDisplayValue = () => {\n if (isLeaf) {\n return value;\n } else if (typeof value === \"string\" && value.endsWith(\"{\")) {\n value = value.slice(0, -1);\n if (!isNaN(parseInt(value))) {\n return `${value}: {...}`;\n } else {\n return `value {...}`;\n }\n } else if (typeof value === \"string\" && value.endsWith(\"[\")) {\n value = value.slice(0, -1);\n return `${value} [...]`;\n }\n };\n\n const displayValue = getDisplayValue();\n const isEmpty = displayValue === \"\" || displayValue === undefined;\n\n return (\n <>\n {isLeaf || isEmpty ? null : <ToggleIconButton isExpanded={isExpanded} />}\n <span>{displayValue}</span>\n </>\n );\n};\n"],"names":["useWindow","useComponentCssInjection","arrayCellCss","jsxs","Fragment","jsx","ToggleIconButton"],"mappings":";;;;;;;;AAQO,MAAM,QAAW,GAAA,CAAC,EAAE,MAAA,EAAQ,SAA8B,KAAA;AAC/D,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAC,UAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,EAAE,MAAS,GAAA,MAAA;AACjB,EAAA,IAAI,EAAE,UAAY,EAAA,MAAA,EAAQ,CAAC,IAAI,GAAG,OAAU,GAAA,OAAA;AAE5C,EAAA,MAAM,kBAAkB,MAAM;AAC5B,IAAA,IAAI,MAAQ,EAAA;AACV,MAAO,OAAA,KAAA;AAAA,eACE,OAAO,KAAA,KAAU,YAAY,KAAM,CAAA,QAAA,CAAS,GAAG,CAAG,EAAA;AAC3D,MAAQ,KAAA,GAAA,KAAA,CAAM,KAAM,CAAA,CAAA,EAAG,CAAE,CAAA,CAAA;AACzB,MAAA,IAAI,CAAC,KAAA,CAAM,QAAS,CAAA,KAAK,CAAC,CAAG,EAAA;AAC3B,QAAA,OAAO,GAAG,KAAK,CAAA,OAAA,CAAA;AAAA,OACV,MAAA;AACL,QAAO,OAAA,CAAA,WAAA,CAAA;AAAA;AACT,eACS,OAAO,KAAA,KAAU,YAAY,KAAM,CAAA,QAAA,CAAS,GAAG,CAAG,EAAA;AAC3D,MAAQ,KAAA,GAAA,KAAA,CAAM,KAAM,CAAA,CAAA,EAAG,CAAE,CAAA,CAAA;AACzB,MAAA,OAAO,GAAG,KAAK,CAAA,MAAA,CAAA;AAAA;AACjB,GACF;AAEA,EAAA,MAAM,eAAe,eAAgB,EAAA;AACrC,EAAM,MAAA,OAAA,GAAU,YAAiB,KAAA,EAAA,IAAM,YAAiB,KAAA,KAAA,CAAA;AAExD,EAAA,uBAEKC,eAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA;AAAA,IAAA,MAAA,IAAU,OAAU,GAAA,IAAA,mBAAQC,cAAA,CAAAC,8BAAA,EAAA,EAAiB,UAAwB,EAAA,CAAA;AAAA,oBACtED,cAAA,CAAC,UAAM,QAAa,EAAA,YAAA,EAAA;AAAA,GACtB,EAAA,CAAA;AAEJ;;;;"}
|
|
@@ -4,24 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
4
4
|
var vuuTable = require('@vuu-ui/vuu-table');
|
|
5
5
|
var vuuDataLocal = require('@vuu-ui/vuu-data-local');
|
|
6
6
|
var react = require('react');
|
|
7
|
-
var vuuUtils = require('@vuu-ui/vuu-utils');
|
|
8
7
|
|
|
9
|
-
const { DEPTH, IS_LEAF, KEY, IDX, SELECTED } = vuuUtils.metadataKeys;
|
|
10
|
-
const rowToTreeNodeObject = (row, columnMap) => {
|
|
11
|
-
const { [IS_LEAF]: isLeaf, [KEY]: key, [IDX]: index, [DEPTH]: depth } = row;
|
|
12
|
-
const firstColIdx = columnMap.nodeData;
|
|
13
|
-
const labelColIdx = firstColIdx + depth;
|
|
14
|
-
return {
|
|
15
|
-
key,
|
|
16
|
-
index,
|
|
17
|
-
isGroupRow: !isLeaf,
|
|
18
|
-
isSelected: row[SELECTED] !== 0,
|
|
19
|
-
data: {
|
|
20
|
-
label: row[labelColIdx],
|
|
21
|
-
nodeData: row[firstColIdx]
|
|
22
|
-
}
|
|
23
|
-
};
|
|
24
|
-
};
|
|
25
8
|
const TreeTable = ({
|
|
26
9
|
config,
|
|
27
10
|
dataSource,
|
|
@@ -62,7 +45,6 @@ const TreeTable = ({
|
|
|
62
45
|
dataSource: dataSourceRef.current,
|
|
63
46
|
groupToggleTarget: "toggle-icon",
|
|
64
47
|
navigationStyle: "tree",
|
|
65
|
-
rowToObject: rowToTreeNodeObject,
|
|
66
48
|
showColumnHeaderMenus: false,
|
|
67
49
|
selectionModel: "single"
|
|
68
50
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TreeTable.js","sources":["../../../../packages/vuu-datatable/src/tree-table/TreeTable.tsx"],"sourcesContent":["import { TableProps } from \"@vuu-ui/vuu-table\";\nimport { Table } from \"@vuu-ui/vuu-table\";\nimport { TreeDataSource } from \"@vuu-ui/vuu-data-local\";\nimport { useMemo, useRef } from \"react\";\nimport { TableConfig } from \"@vuu-ui/vuu-table-types\";\nimport {
|
|
1
|
+
{"version":3,"file":"TreeTable.js","sources":["../../../../packages/vuu-datatable/src/tree-table/TreeTable.tsx"],"sourcesContent":["import { TableProps } from \"@vuu-ui/vuu-table\";\nimport { Table } from \"@vuu-ui/vuu-table\";\nimport { TreeDataSource } from \"@vuu-ui/vuu-data-local\";\nimport { useMemo, useRef } from \"react\";\nimport { TableConfig } from \"@vuu-ui/vuu-table-types\";\nimport { type TreeSourceNode } from \"@vuu-ui/vuu-utils\";\n\ninterface Props extends Omit<TableProps, \"config\" | \"dataSource\"> {\n config?: Pick<\n TableConfig,\n \"columnSeparators\" | \"rowSeparators\" | \"zebraStripes\"\n >;\n dataSource?: TreeDataSource;\n source?: TreeSourceNode[];\n}\n\nexport type TreeTableProps = Props &\n ({ dataSource: TreeDataSource } | { source: TreeSourceNode[] });\n\nexport const TreeTable = ({\n config,\n dataSource,\n source,\n ...tableProps\n}: TreeTableProps) => {\n const dataSourceRef = useRef<TreeDataSource>(undefined);\n useMemo(() => {\n if (dataSource) {\n dataSourceRef.current = dataSource;\n } else if (source) {\n dataSourceRef.current = new TreeDataSource({\n data: source,\n });\n } else {\n throw Error(`TreeTable either source or dataSource must be provided`);\n }\n }, [dataSource, source]);\n\n const tableConfig = useMemo<TableConfig>(() => {\n return {\n ...config,\n columns: dataSourceRef.current?.columnDescriptors ?? [],\n columnSeparators: false,\n selectionBookendWidth: 0,\n rowSeparators: false,\n };\n }, [config]);\n\n console.log({ tableConfig, dataSource: dataSourceRef.current });\n\n if (dataSourceRef.current === undefined) {\n return null;\n }\n\n return (\n <Table\n {...tableProps}\n className=\"vuuTreeTable\"\n config={tableConfig}\n dataSource={dataSourceRef.current}\n groupToggleTarget=\"toggle-icon\"\n navigationStyle=\"tree\"\n showColumnHeaderMenus={false}\n selectionModel=\"single\"\n />\n );\n};\n"],"names":["useRef","useMemo","TreeDataSource","jsx","Table"],"mappings":";;;;;;;AAmBO,MAAM,YAAY,CAAC;AAAA,EACxB,MAAA;AAAA,EACA,UAAA;AAAA,EACA,MAAA;AAAA,EACA,GAAG;AACL,CAAsB,KAAA;AACpB,EAAM,MAAA,aAAA,GAAgBA,aAAuB,KAAS,CAAA,CAAA;AACtD,EAAAC,aAAA,CAAQ,MAAM;AACZ,IAAA,IAAI,UAAY,EAAA;AACd,MAAA,aAAA,CAAc,OAAU,GAAA,UAAA;AAAA,eACf,MAAQ,EAAA;AACjB,MAAc,aAAA,CAAA,OAAA,GAAU,IAAIC,2BAAe,CAAA;AAAA,QACzC,IAAM,EAAA;AAAA,OACP,CAAA;AAAA,KACI,MAAA;AACL,MAAA,MAAM,MAAM,CAAwD,sDAAA,CAAA,CAAA;AAAA;AACtE,GACC,EAAA,CAAC,UAAY,EAAA,MAAM,CAAC,CAAA;AAEvB,EAAM,MAAA,WAAA,GAAcD,cAAqB,MAAM;AAC7C,IAAO,OAAA;AAAA,MACL,GAAG,MAAA;AAAA,MACH,OAAS,EAAA,aAAA,CAAc,OAAS,EAAA,iBAAA,IAAqB,EAAC;AAAA,MACtD,gBAAkB,EAAA,KAAA;AAAA,MAClB,qBAAuB,EAAA,CAAA;AAAA,MACvB,aAAe,EAAA;AAAA,KACjB;AAAA,GACF,EAAG,CAAC,MAAM,CAAC,CAAA;AAEX,EAAA,OAAA,CAAQ,IAAI,EAAE,WAAA,EAAa,UAAY,EAAA,aAAA,CAAc,SAAS,CAAA;AAE9D,EAAI,IAAA,aAAA,CAAc,YAAY,KAAW,CAAA,EAAA;AACvC,IAAO,OAAA,IAAA;AAAA;AAGT,EACE,uBAAAE,cAAA;AAAA,IAACC,cAAA;AAAA,IAAA;AAAA,MACE,GAAG,UAAA;AAAA,MACJ,SAAU,EAAA,cAAA;AAAA,MACV,MAAQ,EAAA,WAAA;AAAA,MACR,YAAY,aAAc,CAAA,OAAA;AAAA,MAC1B,iBAAkB,EAAA,aAAA;AAAA,MAClB,eAAgB,EAAA,MAAA;AAAA,MAChB,qBAAuB,EAAA,KAAA;AAAA,MACvB,cAAe,EAAA;AAAA;AAAA,GACjB;AAEJ;;;;"}
|
|
@@ -1,12 +1,10 @@
|
|
|
1
1
|
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { metadataKeys } from '@vuu-ui/vuu-utils';
|
|
3
2
|
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
4
3
|
import { useWindow } from '@salt-ds/window';
|
|
5
4
|
import { ToggleIconButton } from '@vuu-ui/vuu-ui-controls';
|
|
6
5
|
import arrayCellCss from './JsonCell.css.js';
|
|
7
6
|
|
|
8
|
-
const {
|
|
9
|
-
const JsonCell = ({ column, columnMap, row }) => {
|
|
7
|
+
const JsonCell = ({ column, dataRow }) => {
|
|
10
8
|
const targetWindow = useWindow();
|
|
11
9
|
useComponentCssInjection({
|
|
12
10
|
testId: "vuu-array-cell",
|
|
@@ -14,8 +12,7 @@ const JsonCell = ({ column, columnMap, row }) => {
|
|
|
14
12
|
window: targetWindow
|
|
15
13
|
});
|
|
16
14
|
const { name } = column;
|
|
17
|
-
|
|
18
|
-
let { [IS_EXPANDED]: isExpanded, [IS_LEAF]: isLeaf, [dataIdx]: value } = row;
|
|
15
|
+
let { isExpanded, isLeaf, [name]: value } = dataRow;
|
|
19
16
|
const getDisplayValue = () => {
|
|
20
17
|
if (isLeaf) {
|
|
21
18
|
return value;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JsonCell.js","sources":["../../../../packages/vuu-datatable/src/json-table/JsonCell.tsx"],"sourcesContent":["import { TableCellProps } from \"@vuu-ui/vuu-table-types\";\nimport {
|
|
1
|
+
{"version":3,"file":"JsonCell.js","sources":["../../../../packages/vuu-datatable/src/json-table/JsonCell.tsx"],"sourcesContent":["import { TableCellProps } from \"@vuu-ui/vuu-table-types\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ToggleIconButton } from \"@vuu-ui/vuu-ui-controls\";\n\n// Note the className is actually applied to containing cell\nimport arrayCellCss from \"./JsonCell.css\";\n\nexport const JsonCell = ({ column, dataRow }: TableCellProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-array-cell\",\n css: arrayCellCss,\n window: targetWindow,\n });\n\n const { name } = column;\n let { isExpanded, isLeaf, [name]: value } = dataRow;\n\n const getDisplayValue = () => {\n if (isLeaf) {\n return value;\n } else if (typeof value === \"string\" && value.endsWith(\"{\")) {\n value = value.slice(0, -1);\n if (!isNaN(parseInt(value))) {\n return `${value}: {...}`;\n } else {\n return `value {...}`;\n }\n } else if (typeof value === \"string\" && value.endsWith(\"[\")) {\n value = value.slice(0, -1);\n return `${value} [...]`;\n }\n };\n\n const displayValue = getDisplayValue();\n const isEmpty = displayValue === \"\" || displayValue === undefined;\n\n return (\n <>\n {isLeaf || isEmpty ? null : <ToggleIconButton isExpanded={isExpanded} />}\n <span>{displayValue}</span>\n </>\n );\n};\n"],"names":[],"mappings":";;;;;;AAQO,MAAM,QAAW,GAAA,CAAC,EAAE,MAAA,EAAQ,SAA8B,KAAA;AAC/D,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAA,YAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,EAAE,MAAS,GAAA,MAAA;AACjB,EAAA,IAAI,EAAE,UAAY,EAAA,MAAA,EAAQ,CAAC,IAAI,GAAG,OAAU,GAAA,OAAA;AAE5C,EAAA,MAAM,kBAAkB,MAAM;AAC5B,IAAA,IAAI,MAAQ,EAAA;AACV,MAAO,OAAA,KAAA;AAAA,eACE,OAAO,KAAA,KAAU,YAAY,KAAM,CAAA,QAAA,CAAS,GAAG,CAAG,EAAA;AAC3D,MAAQ,KAAA,GAAA,KAAA,CAAM,KAAM,CAAA,CAAA,EAAG,CAAE,CAAA,CAAA;AACzB,MAAA,IAAI,CAAC,KAAA,CAAM,QAAS,CAAA,KAAK,CAAC,CAAG,EAAA;AAC3B,QAAA,OAAO,GAAG,KAAK,CAAA,OAAA,CAAA;AAAA,OACV,MAAA;AACL,QAAO,OAAA,CAAA,WAAA,CAAA;AAAA;AACT,eACS,OAAO,KAAA,KAAU,YAAY,KAAM,CAAA,QAAA,CAAS,GAAG,CAAG,EAAA;AAC3D,MAAQ,KAAA,GAAA,KAAA,CAAM,KAAM,CAAA,CAAA,EAAG,CAAE,CAAA,CAAA;AACzB,MAAA,OAAO,GAAG,KAAK,CAAA,MAAA,CAAA;AAAA;AACjB,GACF;AAEA,EAAA,MAAM,eAAe,eAAgB,EAAA;AACrC,EAAM,MAAA,OAAA,GAAU,YAAiB,KAAA,EAAA,IAAM,YAAiB,KAAA,KAAA,CAAA;AAExD,EAAA,uBAEK,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,IAAA,MAAA,IAAU,OAAU,GAAA,IAAA,mBAAQ,GAAA,CAAA,gBAAA,EAAA,EAAiB,UAAwB,EAAA,CAAA;AAAA,oBACtE,GAAA,CAAC,UAAM,QAAa,EAAA,YAAA,EAAA;AAAA,GACtB,EAAA,CAAA;AAEJ;;;;"}
|
|
@@ -2,24 +2,7 @@ import { jsx } from 'react/jsx-runtime';
|
|
|
2
2
|
import { Table } from '@vuu-ui/vuu-table';
|
|
3
3
|
import { TreeDataSource } from '@vuu-ui/vuu-data-local';
|
|
4
4
|
import { useRef, useMemo } from 'react';
|
|
5
|
-
import { metadataKeys } from '@vuu-ui/vuu-utils';
|
|
6
5
|
|
|
7
|
-
const { DEPTH, IS_LEAF, KEY, IDX, SELECTED } = metadataKeys;
|
|
8
|
-
const rowToTreeNodeObject = (row, columnMap) => {
|
|
9
|
-
const { [IS_LEAF]: isLeaf, [KEY]: key, [IDX]: index, [DEPTH]: depth } = row;
|
|
10
|
-
const firstColIdx = columnMap.nodeData;
|
|
11
|
-
const labelColIdx = firstColIdx + depth;
|
|
12
|
-
return {
|
|
13
|
-
key,
|
|
14
|
-
index,
|
|
15
|
-
isGroupRow: !isLeaf,
|
|
16
|
-
isSelected: row[SELECTED] !== 0,
|
|
17
|
-
data: {
|
|
18
|
-
label: row[labelColIdx],
|
|
19
|
-
nodeData: row[firstColIdx]
|
|
20
|
-
}
|
|
21
|
-
};
|
|
22
|
-
};
|
|
23
6
|
const TreeTable = ({
|
|
24
7
|
config,
|
|
25
8
|
dataSource,
|
|
@@ -60,7 +43,6 @@ const TreeTable = ({
|
|
|
60
43
|
dataSource: dataSourceRef.current,
|
|
61
44
|
groupToggleTarget: "toggle-icon",
|
|
62
45
|
navigationStyle: "tree",
|
|
63
|
-
rowToObject: rowToTreeNodeObject,
|
|
64
46
|
showColumnHeaderMenus: false,
|
|
65
47
|
selectionModel: "single"
|
|
66
48
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TreeTable.js","sources":["../../../../packages/vuu-datatable/src/tree-table/TreeTable.tsx"],"sourcesContent":["import { TableProps } from \"@vuu-ui/vuu-table\";\nimport { Table } from \"@vuu-ui/vuu-table\";\nimport { TreeDataSource } from \"@vuu-ui/vuu-data-local\";\nimport { useMemo, useRef } from \"react\";\nimport { TableConfig } from \"@vuu-ui/vuu-table-types\";\nimport {
|
|
1
|
+
{"version":3,"file":"TreeTable.js","sources":["../../../../packages/vuu-datatable/src/tree-table/TreeTable.tsx"],"sourcesContent":["import { TableProps } from \"@vuu-ui/vuu-table\";\nimport { Table } from \"@vuu-ui/vuu-table\";\nimport { TreeDataSource } from \"@vuu-ui/vuu-data-local\";\nimport { useMemo, useRef } from \"react\";\nimport { TableConfig } from \"@vuu-ui/vuu-table-types\";\nimport { type TreeSourceNode } from \"@vuu-ui/vuu-utils\";\n\ninterface Props extends Omit<TableProps, \"config\" | \"dataSource\"> {\n config?: Pick<\n TableConfig,\n \"columnSeparators\" | \"rowSeparators\" | \"zebraStripes\"\n >;\n dataSource?: TreeDataSource;\n source?: TreeSourceNode[];\n}\n\nexport type TreeTableProps = Props &\n ({ dataSource: TreeDataSource } | { source: TreeSourceNode[] });\n\nexport const TreeTable = ({\n config,\n dataSource,\n source,\n ...tableProps\n}: TreeTableProps) => {\n const dataSourceRef = useRef<TreeDataSource>(undefined);\n useMemo(() => {\n if (dataSource) {\n dataSourceRef.current = dataSource;\n } else if (source) {\n dataSourceRef.current = new TreeDataSource({\n data: source,\n });\n } else {\n throw Error(`TreeTable either source or dataSource must be provided`);\n }\n }, [dataSource, source]);\n\n const tableConfig = useMemo<TableConfig>(() => {\n return {\n ...config,\n columns: dataSourceRef.current?.columnDescriptors ?? [],\n columnSeparators: false,\n selectionBookendWidth: 0,\n rowSeparators: false,\n };\n }, [config]);\n\n console.log({ tableConfig, dataSource: dataSourceRef.current });\n\n if (dataSourceRef.current === undefined) {\n return null;\n }\n\n return (\n <Table\n {...tableProps}\n className=\"vuuTreeTable\"\n config={tableConfig}\n dataSource={dataSourceRef.current}\n groupToggleTarget=\"toggle-icon\"\n navigationStyle=\"tree\"\n showColumnHeaderMenus={false}\n selectionModel=\"single\"\n />\n );\n};\n"],"names":[],"mappings":";;;;;AAmBO,MAAM,YAAY,CAAC;AAAA,EACxB,MAAA;AAAA,EACA,UAAA;AAAA,EACA,MAAA;AAAA,EACA,GAAG;AACL,CAAsB,KAAA;AACpB,EAAM,MAAA,aAAA,GAAgB,OAAuB,KAAS,CAAA,CAAA;AACtD,EAAA,OAAA,CAAQ,MAAM;AACZ,IAAA,IAAI,UAAY,EAAA;AACd,MAAA,aAAA,CAAc,OAAU,GAAA,UAAA;AAAA,eACf,MAAQ,EAAA;AACjB,MAAc,aAAA,CAAA,OAAA,GAAU,IAAI,cAAe,CAAA;AAAA,QACzC,IAAM,EAAA;AAAA,OACP,CAAA;AAAA,KACI,MAAA;AACL,MAAA,MAAM,MAAM,CAAwD,sDAAA,CAAA,CAAA;AAAA;AACtE,GACC,EAAA,CAAC,UAAY,EAAA,MAAM,CAAC,CAAA;AAEvB,EAAM,MAAA,WAAA,GAAc,QAAqB,MAAM;AAC7C,IAAO,OAAA;AAAA,MACL,GAAG,MAAA;AAAA,MACH,OAAS,EAAA,aAAA,CAAc,OAAS,EAAA,iBAAA,IAAqB,EAAC;AAAA,MACtD,gBAAkB,EAAA,KAAA;AAAA,MAClB,qBAAuB,EAAA,CAAA;AAAA,MACvB,aAAe,EAAA;AAAA,KACjB;AAAA,GACF,EAAG,CAAC,MAAM,CAAC,CAAA;AAEX,EAAA,OAAA,CAAQ,IAAI,EAAE,WAAA,EAAa,UAAY,EAAA,aAAA,CAAc,SAAS,CAAA;AAE9D,EAAI,IAAA,aAAA,CAAc,YAAY,KAAW,CAAA,EAAA;AACvC,IAAO,OAAA,IAAA;AAAA;AAGT,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,UAAA;AAAA,MACJ,SAAU,EAAA,cAAA;AAAA,MACV,MAAQ,EAAA,WAAA;AAAA,MACR,YAAY,aAAc,CAAA,OAAA;AAAA,MAC1B,iBAAkB,EAAA,aAAA;AAAA,MAClB,eAAgB,EAAA,MAAA;AAAA,MAChB,qBAAuB,EAAA,KAAA;AAAA,MACvB,cAAe,EAAA;AAAA;AAAA,GACjB;AAEJ;;;;"}
|
package/package.json
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "0.13.
|
|
2
|
+
"version": "0.13.115-alpha.2",
|
|
3
3
|
"author": "heswell",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"dependencies": {
|
|
6
6
|
"@salt-ds/core": "1.54.1",
|
|
7
7
|
"@salt-ds/styles": "0.2.1",
|
|
8
8
|
"@salt-ds/window": "0.1.1",
|
|
9
|
-
"@vuu-ui/vuu-data-local": "0.13.
|
|
10
|
-
"@vuu-ui/vuu-table-types": "0.13.
|
|
11
|
-
"@vuu-ui/vuu-filters": "0.13.
|
|
12
|
-
"@vuu-ui/vuu-layout": "0.13.
|
|
13
|
-
"@vuu-ui/vuu-popups": "0.13.
|
|
14
|
-
"@vuu-ui/vuu-shell": "0.13.
|
|
15
|
-
"@vuu-ui/vuu-table": "0.13.
|
|
16
|
-
"@vuu-ui/vuu-table-extras": "0.13.
|
|
17
|
-
"@vuu-ui/vuu-ui-controls": "0.13.
|
|
18
|
-
"@vuu-ui/vuu-utils": "0.13.
|
|
9
|
+
"@vuu-ui/vuu-data-local": "0.13.115-alpha.2",
|
|
10
|
+
"@vuu-ui/vuu-table-types": "0.13.115-alpha.2",
|
|
11
|
+
"@vuu-ui/vuu-filters": "0.13.115-alpha.2",
|
|
12
|
+
"@vuu-ui/vuu-layout": "0.13.115-alpha.2",
|
|
13
|
+
"@vuu-ui/vuu-popups": "0.13.115-alpha.2",
|
|
14
|
+
"@vuu-ui/vuu-shell": "0.13.115-alpha.2",
|
|
15
|
+
"@vuu-ui/vuu-table": "0.13.115-alpha.2",
|
|
16
|
+
"@vuu-ui/vuu-table-extras": "0.13.115-alpha.2",
|
|
17
|
+
"@vuu-ui/vuu-ui-controls": "0.13.115-alpha.2",
|
|
18
|
+
"@vuu-ui/vuu-utils": "0.13.115-alpha.2"
|
|
19
19
|
},
|
|
20
20
|
"peerDependencies": {
|
|
21
21
|
"clsx": "^2.0.0",
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { TableCellProps } from "@vuu-ui/vuu-table-types";
|
|
2
|
-
export declare const JsonCell: ({ column,
|
|
2
|
+
export declare const JsonCell: ({ column, dataRow }: TableCellProps) => import("react/jsx-runtime").JSX.Element;
|