MultiLevelTable

Developed by Ishmum Jawad Khan

Description:

A Table is quite easy to build and render. But complexity arises when a nested object is needed to be rendered in a table. Further more complexity arrives when a semantic table is needed to build with pure strategy. Here comes MultiLevelTable developed in Dynamic Solution Innovators. Usage of MultiLevelTable is very easy. Just pass data to the table and define the structure of data and pass it through the structure prop. Add any actions for any object or multi nested object.

Output

Install

npm install --save @dsinnovators/multi-level-table

Usage

Table data

const data = [
  {
    id: 1,
    name: "Lorem University",
    degrees: [
      {
        id: 1,
        name: "B.Sc",
        courses: [
          {
            id: 1,
            name: "Computer Science and Engineering",
          },
          {
            id: 2,
            name: "Electrical and Electronics Engineering",
          },
          {
            id: 3,
            name: "Busniess Administration",
          },
        ],
      },
      {
        id: 2,
        name: "M.Sc",
        courses: [
          {
            id: 1,
            name: "Computer Science and Engineering",
          },
          {
            id: 2,
            name: "Electrical and Electronics Engineering",
          },
        ],
      },
    ],
  },
  {
    id: 2,
    name: "Ipsum University",
    degrees: [
      {
        id: 1,
        name: "B.Sc",
        courses: [
          {
            id: 1,
            name: "Computer Science and Engineering",
          },
          {
            id: 2,
            name: "Busniess Administration",
          },
        ],
      },
      {
        id: 2,
        name: "M.Sc",
        courses: [
          {
            id: 1,
            name: "Computer Science and Engineering",
          },
        ],
      },
    ],
  },
];

Structure

const structure =
  {
    name: "institutions",
    children: [{
      field: "name",
      display: "Institute"
    }],
    array: {
      name: "degrees",
      children: [{
        field: "name",
        display: "Degree"
      }],
      array: {
        name: "courses",
        children: [{
          field: "name",
          display: "Course"
        }],
      },
    },
  };

Action

const actions =
  [
    {
      name: "View Course Details",
      callback: (value) => {
        console.log("Course Details :", value);
      },
    },
    {
      name: "Students",
      callback: (value) => {
        console.log("Students:", value);
      },
    },
  ]

Custom CSS classNames

const className =  {
  table : 'w-full shadow-sm overflow-hidden rounded-lg text-center',
  head : 'text-white bg-gray-700 text-center',
  body : 'p-2 border-solid border border-light-blue-300'
}

Component

import MultiLevelTable from '@dsinnovators/multi-level-table'

const ExamplePage = () => {
  return <MultiLevelTable
    data={data}
    structure={structure}
    actions={actions} //optional
    actionLabel="Manage" //optional
    className={className} //optional
  />
}

Parameters

| Parameter | Required | Description | Default | Type | :---: | :---: | :---: | :---: | :---: | | data | true | fetch data from api or any static data | undefined | ArrayOf(object) | structure | true | specify the structure of given data | undefined | object | actions | false | takes array of object {name, callback}. add any actions for nested data | undefined | ArrayOf({ name: string, callback: func}) | actionLabel | false | give action label for actions | Action | string | className | false | takes a object {table, head, body}. pass CSS classNames to customize table | see above | {table: string, head: string, body: string}

License

GNU General Public License v3.0

© Dynamic Solution Innovators