Installation

Using npm

npm i @arungovil/flatgrid

Using Yarn

yarn add @arungovil/flatgrid

Usage

import { render } from "@arungovil/flatgrid";

const levels = [
  {
    columns: [
      { key: "project", header: "Project" },
      { key: "status", header: "Status" },
    ],
    childrenKey: "tasks",
  },
  {
    columns: [
      { key: "task", header: "Task" },
      { key: "done", header: "Done" },
    ],
  },
];

const data = [
  {
    project: "Project A",
    status: "Active",
    tasks: [
      { task: "Task 1", done: "Yes" },
      { task: "Task 2", done: "No" },
    ],
  },
];

const { headers, rows } = render(levels, data);

Result

// headers
[
  { key: "project", label: "Project" },
  { key: "status",  label: "Status"  },
  { key: "task",    label: "Task"    },
  { key: "done",    label: "Done"    },
]

// rows — only cells that need a <td> are emitted per row
[
  [
    { columnKey: "project", value: "Project A", rowspan: 2 },
    { columnKey: "status",  value: "Active",    rowspan: 2 },
    { columnKey: "task",    value: "Task 1",    rowspan: 1 },
    { columnKey: "done",    value: "Yes",       rowspan: 1 },
  ],
  [
    { columnKey: "task",    value: "Task 2",    rowspan: 1 },
    { columnKey: "done",    value: "No",        rowspan: 1 },
  ],
]

API

render(levels, data)

Level

Column