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.