1.2.9 • Published 2 years ago
react-table-with-pagination v1.2.9
How to use
import DataTable from 'react-table-with-pagination'
How to Declare
<DataTable
tableClassName = "table tablesort table-responsive tablesearch-table table-bordered table-hover text-center"
theadData={header}
tbodyData={data}
rowsPerPage = {rowPaginationCount}
parameter={showData}
customClassName={customClassName}
textStyle={textStyle}
searchData = {search}
actionColumn = {actionColumn}
pagination = "true"
/>
Sample Input Data
const [rowPaginationCount,setRowPaginationCount] = useState(5)
const [search,setSearch] = useState('')
const data = [
{
color: "red",
value: "#f00"
},
{
color: "green",
value: "#0f0"
},
{
color: "blue",
value: "#00f"
},
{
color: "cyan",
value: "#0ff"
},
{
color: "magenta",
value: "#f0f"
},
{
color: "yellow",
value: "#ff0"
},
{
color: "black",
value: "#000"
},
{
color: "green",
value: "#0f0"
},
{
color: "blue",
value: "#00f"
},
{
color: "cyan",
value: "#0ff"
},
{
color: "magenta",
value: "#f0f"
},
{
color: "yellow",
value: "#ff0"
},
{
color: "black",
value: "#000"
}
]
const header = [
'color',
'value',
'Action'
]
const showData = [
'color',
'value'
]
function customClassName(getData){
if(getData.color === "red"){
return "danger"
}
}
const textStyle = {
'color' : { textAlign : 'right', fontWeight:'700' },
}
const actionColumn = (getData) => {
return(
<div>
<a onClick={(e)=>editData(getData)}>Edit</a>
<a onClick={(e)=>deleteData(getData)}>Delete</a>
</div>
)
}
function editData(getData) {
console.log(getData)
}
function deleteData(getData) {
console.log(getData)
}
1.2.9
2 years ago
1.2.8
2 years ago
1.2.7
2 years ago
1.2.6
2 years ago
1.2.5
2 years ago
1.2.4
2 years ago
1.2.3
2 years ago
1.2.2
2 years ago
1.2.1
2 years ago
1.2.0
2 years ago
1.1.9
2 years ago
1.1.8
2 years ago
1.1.7
2 years ago
1.1.6
2 years ago
1.1.5
2 years ago
1.1.4
2 years ago
1.1.3
2 years ago
1.1.2
2 years ago
1.1.1
2 years ago
1.1.0
2 years ago
1.0.9
2 years ago
1.0.8
2 years ago
1.0.7
2 years ago
1.0.6
2 years ago
1.0.5
2 years ago
1.0.4
2 years ago
1.0.3
2 years ago
1.0.2
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago
0.1.0
2 years ago