this is react bootstrap dynamic table
npm install react-bootstrap-dynamic-tablejavascript
npm install react-bootstrap-dynamic-table --save
`
---
###Import
After that import react-bootstrap-dynamic-table
`javascript
import ReactBootstrapDynamicTable from 'react-bootstrap-dynamic-table';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'font-awesome/css/font-awesome.min.css';
`
After require fontawesome react-fontawesome
`javascript
const Font = require('react-fontawesome');
`
---
###How to use
And then use this table where you want on your page.
`javascript
`
---
Pass userTableObj object as a props in ReactBootstrapDynamicTable component.
`javascript
// table object pass to table component
const userTableObj = {
configuration: configuration, // table configuration
sourceData: tableData.data // array Data
// optional props - this will rerurn selected data
// if you want checkbox configure showCheckbox: true in configuration and pass this callback function
onSelected: (usersList) => setSelectedUsers(usersList), // usersList is selected data you can store in your var or state
errorMessage: errorMessage //optional props - you can pass error messsage also if table have no data
};
`
---
###Note
key should be same as data(array) key eg: id, name, email, mobile etc.
Configuration is a object which contains table header columns settings.
`javascript
{/* table header settings
* Note: key should be same as data(array) key eg: id, name, email, mobile etc.
*/}
const [configuration, setConfiguration] = useState({
columns: {
"id": {
"title": "ID",
"sort": false,
// this callback function for clicked on particular data(td) and it will return clicked row data
"onClick": (row) => {
alert("table data clicked");
}
"width": '50px', // User can change their table column width
},
"name": {
"title": "Name",
"sort": false,
isSearchEnabled: true
},
"mobile": {
"title": "Mobile No.",
"sort": false,
isSearchEnabled: false
},
"email": {
"title": "Email",
"sort": false,
isSearchEnabled: true
}
},
// this callback function for clicked on particular whole row and it will return clicked row data
// optional if you want you can
onClick: (row) => {
alert("row clicked");
},
columnsClass: '#007b9f', // user can change table header text color
sortBy: 'name', // by default sort table by name key
sortDirection: true, // sort direction by default true
// this callback metho to update the sortBy key or sortDirection key when user click on table column header
updateSortBy: (sortKey) => {
let header = { ...configuration };
header.sortBy = sortKey;
Object.keys(header.columns).map((key) => { header.columns[key].sort = (key === sortKey) ? (typeof header.columns[key].sort === 'boolean' ? !header.columns[key].sort : true) : '' });
header.sortDirection = header.columns[sortKey].sort;
setConfiguration(header);
},
actions: [
{
"title": "Delete",
"icon": ,
"onClick": (row) => {
alert("Delete " + row.id);
}
},
{
"title": "Edit",
"icon": ,
"onClick": (row) => {
alert("Edit " + row.id);
}
}
],
actionCustomClass: "esc-btn-dropdown", // user can pass their own custom class name to add/remove some css style on action button
actionVariant: "", // user can pass action button variant like primary, dark, light,
actionAlignment: true, // user can pass alignment property of dropdown menu by default it is alignLeft
// call this callback function onSearch method in input field on onChange handler eg: configuration.onSearch(e.target.value)} />
onSearch: (searchVal) =>{
let config = { ...configuration };
config.searchQuery = searchVal;
setConfiguration(config);
},
searchQuery: "", // pass search string to search data from table
tableCustomClass: "", // user can pass their own custom className to change table style on your choice
showCheckbox: true, // if you want checkbox to select particular row you add this key
clearSelection: false // // for clear all checkbox selection
});
`
---
###Source Data - Array data
`javascript
// table data
const [tableData, setTableData] = useState({
data: [
{ id: 1, name: "Senthil R", mobile: "793744", email: "senthil@email.com"},
{ id: 2, name: "Abinaya L", mobile: "895874", email: "abi@email.com" },
{ id: 3, name: "Rahul", mobile: "569329", email: "rahul@email.com" },
{ id: 4, name: "Amit", mobile: "798857", email: "amit@email.com" },
{ id: 5, name: "Dheeraj", mobile: "974384", email: "dheeraj@email.com" },
]
});
`
----
###Example
`javascript
import React, { useState } from 'react';
import ReactBootstrapDynamicTable from 'rct-bootstrap-table';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'font-awesome/css/font-awesome.min.css';
const Font = require('react-fontawesome')
function App() {
{/* table header settings
* Note: key should be same as data(array) key eg: id, name, email, mobile etc.
*/}
const [configuration, setConfiguration] = useState({
columns: {
"id": {
"title": "ID",
"sort": false,
"events": [{
click: () => {
}, mouseover: () => {
},
isSearchEnabled: false,
}],
"width": '50px', // user can change width of table column
},
"name": {
"title": "Name",
"sort": false,
isSearchEnabled: true
},
"mobile": {
"title": "Mobile No.",
"sort": false,
isSearchEnabled: false
},
"email": {
"title": "Email",
"sort": false,
isSearchEnabled: true
}
},
columnsClass: '#007b9f', // user can change table header text color
sortBy: 'name', // by default sort table by name key
sortDirection: true, // sort direction by default true
updateSortBy: (sortKey) =>{
let header = { ...configuration };
header.sortBy = sortKey;
Object.keys(header.columns).map((key) => { header.columns[key].sort = (key === sortKey) ? (typeof header.columns[key].sort === 'boolean' ? !header.columns[key].sort : true) : '' });
header.sortDirection = header.columns[sortKey].sort;
setConfiguration(header);
},,
actions: [
{
"title": "Delete",
"icon": ,
"onClick": (row) => {
alert("Delete " + row.id);
}
},
{
"title": "Edit",
"icon": ,
"onClick": (row) => {
alert("Edit " + row.id);
}
}
],
actionCustomClass: "esc-btn-dropdown", // user can pass their own custom class name to add/remove some css style on action button
actionVariant: "", // user can pass action button variant like primary, dark, light,
actionAlignment: true, // user can pass alignment property of dropdown menu by default it is alignLeft
// call this callback function onSearch method in input field on onChange handler eg: onSearch(e.target.value)}/>
onSearch: (searchVal) =>{
let config = { ...configuration };
config.searchQuery = searchVal;
setConfiguration(config);
},
searchQuery: "",
tableCustomClass: "ec-table", // user can pass their own custom className to change table style on your choice
});
// table data
const [tableData, setTableData] = useState({
data:
[
{ id: 1, name: "Senthil R", mobile: "793744", email: "senthil@email.com"},
{ id: 2, name: "Abinaya L", mobile: "895874", email: "abi@email.com" },
{ id: 3, name: "Rahul", mobile: "569329", email: "dristi@email.com" },
{ id: 4, name: "amit", mobile: "798857", email: "amit@email.com" },
{ id: 5, name: "Dheeraj", mobile: "974384", email: "dheeraj@email.com" },
]
});
// table object pass to table component
const userTableObj = {
configuration: configuration,
sourceData: tableData.data
};
return (
{/ input box for search /}
{/ Table component pass userTableObj as props /}
);
}
export default App;
``