react-bootstrap-dynamic-table

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

npm install react-bootstrap-dynamic-table --save

---

Import

After that import react-bootstrap-dynamic-table

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

const Font = require('react-fontawesome');

---

How to use

And then use this table where you want on your page.

 <ReactBootstrapDynamicTable {...userTableObj} />

---

Pass userTableObj object as a props in **ReactBootstrapDynamicTable ** component.

 // 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.

{/* 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

 // table data
 const [tableData, setTableData] = useState({
   data: [
     { id: 1, name: "Senthil R", mobile: "793744", email: "[e-mail]"},
     { id: 2, name: "Abinaya L", mobile: "895874", email: "[e-mail]" },
     { id: 3, name: "Rahul", mobile: "569329", email: "[e-mail]" },
     { id: 4, name: "Amit", mobile: "798857", email: "[e-mail]" },
     { id: 5, name: "Dheeraj", mobile: "974384", email: "[e-mail]" },
   ]
 });

---

Example

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: "[e-mail]"},
    { id: 2, name: "Abinaya L", mobile: "895874", email: "[e-mail]" },
    { id: 3, name: "Rahul", mobile: "569329", email: "[e-mail]" },
    { id: 4, name: "amit", mobile: "798857", email: "[e-mail]" },
    { id: 5, name: "Dheeraj", mobile: "974384", email: "[e-mail]" },
   ]
 });
 
  // 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	[e-mail]	...
2	Abinaya L	895874	[e-mail]	...
3	Rahul	569329	[e-mail]	...
4	Amit	798857	[e-mail]	...
5	Dheeraj	974384	[e-mail]	...

---

End