A react table component that accepts rows, columns, data, header details etc. and allows editing table cells and customise column widths
npm install custom-table-react
npm install custom-table-react
`
Add the following statement in your file to import the component
`
import { CustomTable } from 'custom-table-react'
`
#
props
$3
No. of rows in the table
`
type: Number
Required: true
defaultValue: 2
Example :
`
$3
No. of columns in the table
`
type: Number
Required: true
defaultValue: 2
Example :
`
$3
Whether the table cells would be editable or not
editable set to true renders table data components (td) wrapping a full width input element width cell data as the value fo the input field
`
type: Boolean
Required : false
defaultValue: false
Example :
`
$3
Data to be pushed in the table cells
`
type: Array (2d Array of number/strings)
required: false
defaultValue : []
Example :
`
* When prop data is defined with a non-zero length array,
- The headers prop length will be the columns value for table.
- If headers prop is empty, The higher value between:
- maximum data prop array element length
- columns prop
will be the columns value for table
- The higher value between :
- data prop length
- rows prop
will be the rows value for table
Example :
`
`
Above Example will render 4 columns instead of 3 as the length of data prop array is 4.
$3
Array of table column headings
`
type: Array (Array of strings/numbers)
required: false
defaultValue: []
Example :
`
* When prop headers is defined with a non-zero length array, the prop headers array's length will be given higher priority over prop columns value and maximum data prop array element length value.
Example :
`
`
Above Example will render 3 columns instead of 2 or 5 as the length of headers prop array is 3.
$3
Array of width of each column in percentage
`
type: Array
required: false
defaultValue: []
Example :
`
$3
Style Object for table headings, applies to each th element in thead
`
type: Object
required: false
defaultValue : null
``