vyas-react-table
Version:
A simple yet highly configurable table component
272 lines (219 loc) • 10.7 kB
Markdown
# VYAS-REACT-TABLE
A simple yet highly configurable react table component.
# Installation
Run the following command to install this package
```bash
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
```javascript
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:
```javascript
[
{
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.
```javascript
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.