vyas-react-table v1.6.0

VYAS-REACT-TABLE

A simple yet highly configurable react table component.

Installation

Run the following command to install this package

npm i vyas-react-table --save

Features

Usage

import { Table } from "vyas-react-table";

const MyTable = () => {
const data = [
    {
      name: "John",
      age: "25",
      dob: "2022-03-22",
      team: "Team 1",
      projects: [undefined, "Project 2"],
    },
    {
      name: "Jane",
      age: null,
      dob: undefined,
      team: "Team 2",
      projects: ["Project 1", "Project 2", "Project 3"],
    },
    {
      name: "Janethn",
      age: "88",
      dob: "2021-03-22",
      team: "Team 1",
      projects: ["Project 1", "Project 3"],
    },
    {
      name: "Jane",
      age: "28",
      dob: "2022-04-22",
      team: "Team 4",
      projects: ["Project 4"],
    },
  ];

  const tableHeaders = {
    name: {
      key: "name",
      title: "Associate Name",
      type: "text",
    },
    age: {
      key: "age",
      title: "Associate Age",
      type: "number",
    },
    dob: {
      key: "dob",
      title: "Date of Birth",
      type: "date",
    },
    team: {
      key: "team",
      title: "Team Name",
      type: "text",
      options: [
        {
          label: "Team 1",
          value: "Team 1",
        },
        {
          label: "Team 2",
          value: "Team 2",
        },
        {
          label: "Team 3",
          value: "Team 3",
        },
        {
          label: "Team 4",
          value: "Team 4",
        },
      ],
    },

    projects: {
      key: "projects",
      title: "Current Projects",
      type: "text",
      options: [
        {
          label: "Project 1",
          value: "Project 1",
        },
        {
          label: "Project 2",
          value: "Project 2",
        },
        {
          label: "Project 3",
          value: "Project 3",
        },
        {
          label: "Project 4",
          value: "Project 4",
        },
      ],
    },
  };

  const handleRowClick = (data) => {
    console.log(data); // this prints the row object being clicked
  };

  return(
        <Table
        tableName="Associates Data"
        data={data}
        itemsPerPage={5}
        tableHeaders={tableHeaders}
        allowFilters={true}
        allowDownload={true}
        filename="associates"
        nullDataPlaceholder="NA"
        onRowClick={handleRowClick}
        showSerialNo={true}
        borderSpacing="3px 5px"
      />
    );

Sample Output

Props Documentation

Prop : tableName

The name of the table. It is defaulted to Data

Prop : data

This will be an array of objects where each object will represent a row in the table. Do note that all the objects in the array must have the same set of keys. The keys will be used to map the data to the table columns. No key must have their value as an array or an object. the only allowed values are Strings, Numbers and Booleans.

Prop : tableHeaders

This object will define the behaviour of the table columns. Each key in this object will be the key of the column in the table. The value of each key will be an object containing the following properties:

options

This is an array of objects. Each object will have the following properties:

label : The label of the option. This will be displayed in the filter dropdown. value : The value of the option. This will be used to filter the data.

Example:

[
        {
          label: "Team 1",
          value: "Team 1",
        },
        {
          label: "Team 2",
          value: "Team 2",
        },
        {
          label: "Team 3",
          value: "Team 3",
        },
        {
          label: "Team 4",
          value: "Team 4",
        },
],

Prop : allowFilters

This is a boolean value to enable or disable the filters. By default it is set to true. If you wish to turn of filters, set this to false.

Prop : showSerialNo

This is a boolean value to enable or disable the serial numbers. By default it is set to false. If you wish to turn on serial numbers, set this to true.

Prop : borderSpacing

This is a string value to set the spacing between the cells in the table. By default it is set to "3px". This is same as using the border-spacing property in css.

Prop : itemsPerPage

This is a number value to set the number of items to be displayed per page. By default it is set to 10.

Prop : allowDownload

This is a boolean value to enable or disable the download button. By default it is set to false. If you wish to turn on the download button, set this to true. Also if you wish to provide a custom filename for the data being downloaded then provide the filename in the filename prop.

Prop : filename

This is a string value to set the name of the file to be downloaded. By default it is set to data.

Prop : nullDataPlaceholder

This is a string value to set the text to be displayed when there is no data to be displayed. By default it is set to "-".

Prop : onRowClick

This is a function to be called when a row is clicked. The function will be called with the row data as the argument. Thus you can access the row data inside the function with the help of data argument. This is an optional argument.

const handleRowClick = (data) => {
  console.log(data); // this prints the row object being clicked
};

Dependencies

1. Node version 16>=

Important Notes

1. The styles prop was removed in version 1.3.0 onwards. It will be reintroduced in future versions with an easier and better way to style the table.

2. Currently dates are not being handled completely. Thus passing in timestamps will display the timestamps, not the formatted date. This will be handled in the upcoming versions.