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

No.	Feature	Description	Availability
0.	Automatic Serial numbers	Enable or disable serial numbers for the table	✅
1.	Search filters	Text, Date and Single Select Filters	✅
2.	Custom column ordering	Order columns as per your wish using tableHeaders	✅
3.	Resizable columns	Resize the columns to see longer pieces of data	✅
4.	Custom styles	Overwrite the default styles with the help of styles prop	⌛
5.	Custom column names	Provide custom names to columns with the help of tableHeaders prop	✅
7.	Pagination	Select rows per page for easier and concise views	✅
8.	Multi Select Filter	Apply a multi select filter for a column by choosing more than one options	⌛
9.	Range Filters	Filter the table by selecting a range of values like date range and number range	⌛
10.	Download CSV	Download the table data as a CSV file	✅
11.	Multi valued columns	Table cell for a column could have a list of values	✅
12.	Nullish Placeholder	Placeholder for cells with null or undefined as value	✅

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

No.	Prop	Description	Type	Required
0.	tableName	Name of the table	string	Default "Data"
1.	data	The data to be displayed in the table	Array	✅
2.	tableHeaders	The object containing the configuration for the table columns	Object	✅
3.	allowFilters	Enable or disable filters	Boolean	Default true
4.	showSerialNo	Enable or disable serial numbers for the table	Boolean	Default false
5.	borderSpacing	Directly based on the border-spacing property in css for tables	String	Default "4px"
6.	itemsPerPage	Number of items to be displayed per page	Number	Default 10
7.	allowDownload	Enable or disable download button	Boolean	Default false
8.	filename	Name of the file to be downloaded	String	Default "data"
9.	nullDataPlaceholder	Text to be displayed when there is no data to be displayed	String	Default "-"
10.	onRowClick	Callback function to be called when a row is clicked	Function	Optional

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:

Prop	Description	Type	Required	Availability
key	The key of the column in the table. Same key as in the objects of the data array	String	✅	✅
title	The title of the column. The name you wish the table to display as the column header	String	✅	✅
type	The type of the column data. This will determine the base filters to be applied	String	✅	✅
options	The options for single select filter. Only applicable if you want filter	Array	Optional	✅
isRange	If you want the column to be range filter. Provide this only for date and number type	Boolean	Optional	⌛
isMultiSelect	To enable multi select filter. This must be provided only along with options prop	Boolean	Optional	⌛

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.