-
-
Notifications
You must be signed in to change notification settings - Fork 51
How to display a simple tree table? #80
Answered
by
rwieruch
xuanngo2001
asked this question in
Q&A
-
How to display a simple tree table? I was trying to display a tree table with the code below but I'm getting the following error at the line const tree = useTree(data);. I'm new to JS environment. Can someone help?
index-4fe3cddc.js?0a4e:1 Uncaught TypeError: Cannot read properties of undefined (reading 'length')
at I (index-4fe3cddc.js?0a4e:1:2308)
at h (tree.js?0b49:1:7817)
at App (index.js?b635:46:16)
at renderWithHooks (react-dom.development.js?61bb:16305:1)
at mountIndeterminateComponent (react-dom.development.js?61bb:20074:1)
at beginWork (react-dom.development.js?61bb:21587:1)
at HTMLUnknownElement.callCallback (react-dom.development.js?61bb:4164:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js?61bb:4213:1)
at invokeGuardedCallback (react-dom.development.js?61bb:4277:1)
at beginWork1ドル (react-dom.development.js?61bb:27451:1)
Here is the full code:
import React from 'react'; import { CompactTable } from '@table-library/react-table-library/compact'; import { useTree } from '@table-library/react-table-library/tree'; // Reactjs v18 import { createRoot } from 'react-dom/client'; const rootContainer = document.getElementById('root'); const root = createRoot(rootContainer); const list = [ { id: "1", name: "VSCode", deadline: new Date(2020, 1, 17), type: "SETUP", isComplete: true, }, { id: "2", name: "JavaScript", deadline: new Date(2020, 2, 28), type: "LEARN", isComplete: true, nodes: [ { id: "2.1", name: "Data Types", deadline: new Date(2020, 2, 28), type: "LEARN", isComplete: true, }, { id: "2.2", name: "Objects", deadline: new Date(2020, 2, 28), type: "LEARN", isComplete: true, }, ], }, ]; const App = () => { const data = { list }; const tree = useTree(data); return ( <CompactTable data={data} tree={tree} /> ); }; // Reactjs v18 root.render(<App/>);
Beta Was this translation helpful? Give feedback.
All reactions
Answered by
rwieruch
Oct 17, 2022
Try const data = { nodes: list };
Replies: 1 comment 4 replies
-
Try const data = { nodes: list };
Beta Was this translation helpful? Give feedback.
All reactions
4 replies
-
No, that is not it. Regardless, I found the solution. I need to include columns={COLUMNS}. But I still have problem including a column that count the number children
{ label: 'Tasks', renderCell: (item) => item.nodes?.length },
It throws the following error:
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:/xxxxxxxxxxxxxxxxxxxxsrc/index.js: Unexpected token (61:53)
59 | },
60 | // { label: 'Tasks', renderCell: (item) => item.nodes },
> 61 | { label: 'Tasks', renderCell: (item) => item.nodes?.length },
| ^
62 | ];
63 |
64 | const App = () => {
For other, here is the code to display a simple tree table but just comment out the line with item.nodes?.length
import React from 'react'; import { CompactTable } from '@table-library/react-table-library/compact'; import { useTree } from '@table-library/react-table-library/tree'; // Reactjs v18 import { createRoot } from 'react-dom/client'; const rootContainer = document.getElementById('root'); const root = createRoot(rootContainer); const list = [ { id: "1", name: "VSCode", deadline: new Date(2020, 1, 17), type: "SETUP", isComplete: true, }, { id: "2", name: "JavaScript", deadline: new Date(2020, 2, 28), type: "LEARN", isComplete: true, nodes: [ { id: "2.1", name: "Data Types", deadline: new Date(2020, 2, 28), type: "LEARN", isComplete: true, }, { id: "2.2", name: "Objects", deadline: new Date(2020, 2, 28), type: "LEARN", isComplete: true, }, ], }, ]; const COLUMNS = [ { label: 'Task', renderCell: (item) => item.name, tree: true }, { label: 'Deadline', renderCell: (item) => item.deadline.toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit', }), }, { label: 'Type', renderCell: (item) => item.type }, { label: 'Complete', renderCell: (item) => item.isComplete.toString(), }, // { label: 'Tasks', renderCell: (item) => item.nodes }, { label: 'Tasks', renderCell: (item) => item.nodes?.length }, ]; const App = () => { const data = { nodes: list }; const tree = useTree(data); return ( <CompactTable columns={COLUMNS} data={data} tree={tree} /> ); }; // Reactjs v18 root.render(<App/>);
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 1
-
It seems like optional chaining is not supported in your JS environment.
Beta Was this translation helpful? Give feedback.
All reactions
-
thx! Found the solution.
npm install --save-dev @babel/plugin-proposal-optional-chaining
Add this in .babelrc
{
"plugins": [
"@babel/plugin-proposal-optional-chaining"
]
}
Beta Was this translation helpful? Give feedback.
All reactions
-
Perfect!
Beta Was this translation helpful? Give feedback.
All reactions
Answer selected by
xuanngo2001
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment