Responsive, customisable react-table
npm install --save react-responsive-table-customisable
import React from 'react'
import ReactResponsiveTableCustomizable from 'react-responsive-table-customisable'
export const columns = [
{
header: 'Email',
accessor: 'email',
widthPercentage: '40%'
},
{
header: 'Name',
accessor: 'name',
widthPercentage: '30%'
},
{
header: 'Password',
accessor: 'password',
widthPercentage: '30%'
}
]
const testData = [
{
id: '1',
email: '[email protected]',
name: 'test test',
password: ''
},
{
id: '2',
email: '[email protected]',
name: 'test test',
password: ''
},
{
id: '3',
email: '[email protected]',
name: 'test test',
password: ''
},
{
id: '4',
email: '[email protected]',
name: 'test test',
password: ''
},
{
id: '5',
email: '[email protected]',
name: 'test test',
password: ''
},
{
id: '6',
email: '[email protected]',
name: 'test test',
password: ''
},
{
id: '7',
email: '[email protected]',
name: 'test test',
password: ''
},
{
id: '8',
email: '[email protected]',
name: 'test test',
password: ''
},
{
id: '9',
email: '[email protected]',
name: 'test test',
password: ''
},
{
id: '10',
email: '[email protected]',
name: 'test test',
password: ''
},
{
id: '11',
email: '[email protected]',
name: 'test test',
password: ''
}
]
const editComponent = (item: any) => {
return (
<div
onClick={(e) => console.log(e, item)}
>
<div>E</div>
</div>
)
}
const deleteComponent = (item: any) => {
return (
<div onClick={(e) => console.log(e, item)}>
<div>D</div>
</div>
)
}
const moreComponent = (item: any) => {
return (
<div
onClick={(e) => console.log(e, item)}
>
<div>M</div>
</div>
)
}
const App = () => {
return (
<ReactResponsiveTableCustomizable
height={200}
columns={columns}
data={testData}
searchValue={''}
actionButtonComponents={[
editComponent,
deleteComponent,
moreComponent,
]}
selectedRows={[]}
handleClickCheckBox={(id) => {
console.log(id)
}}
handleClickAllCheckBox={() => {}}
/>
)
}
export default App
MIT © tnanthagopal