How to display a simple tree table?

[xuanngo2001]

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 beginWork$1 (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/>);

[rwieruch]

Try const data = { nodes: list };

[xuanngo2001]

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/>);

[rwieruch]

It seems like optional chaining is not supported in your JS environment.

[xuanngo2001]

thx! Found the solution.

npm install --save-dev @babel/plugin-proposal-optional-chaining

Add this in .babelrc

{
    "plugins": [
    "@babel/plugin-proposal-optional-chaining"
    ]      
}

[rwieruch]

Perfect!