Light weight simple react table from where you can copy the rows from table and paste directly into Excel sheet as csv data.
Upload excel sheet to display as table. Also you can download the table as excel. Along with that, you can do inline editing.
npm install react-table-spreadsheet
yarn add react-table-spreadsheet
import Table "react-table-spreadsheet";
<Table
list={} //array object
pageCount={} //no of rows to be showed per page.
headers={} //table header
/>| Props | Expected Value |
|---|---|
| list |
Mandatory. Type: Array object [
{
id: 1,
name: 'Peter',
sex: 'Male
},
{
id: 2,
name: 'Alice',
sex: 'Female
}
]
|
| pageCount |
Optional. Type: Number Value can be any number. Default value is 10 |
| headers |
Mandatory. Type: Array object [{
headerName: 'Id',
mapKey: 'id'
},
{
headerName: 'Name',
mapKey: 'name'
},
{
headerName: 'Gender',
mapKey: 'sex'
}
]}
|
| theadStyle |
Optional. Type: String Pass the className to alter the styles of thead Example
.headerStyle {
tr {
background: #E57373;
th {
padding: 5px 10px
}
}
}
|
| tbodyStyle |
Optional. Type: String Pass the className to alter the styles of tbody Example
.bodyStyle {
tr {
background: #8e8e8e;
color: #fff;
td {
padding: 5px;
}
}
}
|
| btnBg |
Optional. Type: String Pass the color to change the color of the buttons |
| csv |
Optional. Type: Boolean To enable the functionality download as csv file and to activate copy the rows in csv format |
| edited |
Optional. Type: Function Callback function to get the editable row data in json format. Double click the column to edit it's content Note: edited prop should pass in order to activate inline editing |
| upload |
Optional. Type: Boolean To enable csv file upload. Note: First line will be considered as Header. |