react-bootstrap-dynamic-table
Version:
this is react bootstrap dynamic table
295 lines (271 loc) • 10.9 kB
Markdown
### Features
- This is React Bootstrap Dynamic Table component.
- This table component is a very **Generic** and **Dynamic** table component.
- User can set the columns - how many column, he/she want to show(they can configure in **header configuration**)
- User have to pass only **Header Configuration** and **SourceData** in json structure format.
- **Sort By Column**
- User can sort table data by column key in ascending or descending order.
- **Search**
- User can search data by passing **searchQuerry**
- Just call the callback function **onSearch** in input field on onChange handler and pass search querry as parameter
- eg: <input type="text" onChange={(e) => configuration.onSearch(e.target.value)} />
- User can enable or disable search by column, make isSearchEnabled true or false in configuration column setting (eg. isSearchEnabled: true)
- User can pass the action like **Edit/ Delete** to perform the action on each row.
- User can change their table column width
- User can change their table style on his/her choice
---
###Install
First install **react-bootstrap-dynamic-table** using command
```javascript
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
<ReactBootstrapDynamicTable {...userTableObj} />
```
---
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": <Font name="trash-o" />,
"onClick": (row) => {
alert("Delete " + row.id);
}
},
{
"title": "Edit",
"icon": <Font name="pencil-square-o" />,
"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: <input type="text" onChange={(e) => 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": <Font name="trash-o" />,
"onClick": (row) => {
alert("Delete " + row.id);
}
},
{
"title": "Edit",
"icon": <Font name="pencil-square-o" />,
"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: <input type="text" onChange={(e) => 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 (
<div className="App">
{/* input box for search */}
<form className="form-inline m-2">
<div className="form-group">
<input type="text" className="form-control form-control-sm" onChange={(e) => configuration.onSearch(e.target.value)} placeholder="Search..." />
</div>
<div className="form-group">
<span className="search-input-icon"><i className="fa fa-search"></i></span>
</div>
</form>
{/* Table component pass userTableObj as props */}
<ReactBootstrapDynamicTable {...userTableObj} />
</div>
);
}
export default App;
```
###Table
Id | Name | Mobile | Email | Action
------------- | ------------- | ------------- | ------------- | ------------- |
1 | Senthil R | 793744 | senthil@email.com | ...
2 | Abinaya L | 895874 | abi@email.com | ...
3 | Rahul | 569329 | rahul@email.com | ...
4 | Amit | 798857 | amit@email.com | ...
5 | Dheeraj | 974384 | dheeraj@email.com | ...
----
###End