### 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