rct-bootstrap-table v1.0.8

Features

• This is React Bootstrap Table component .
• This table component is a Generic Table component .
• 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
• 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 the rct-bootstrap-table using this command

npm install rct-bootstrap-table

###Import After that import ReactBootstrapTable

import ReactBootstrapTable from 'rct-bootstrap-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.

 <ReactBootstrapTable {...userTableObj} />

Pass userTableObj object as a props in ReactBootstrapTable component.

 // table object pass to table component
  const userTableObj = {
    configuration: configuration, // table configuration
    sourceData: tableData.data // array 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,
        "events": [{
          click: () => {

          }, mouseover: () => {

          },
          isSearchEnabled: false,
        }],
        "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
      }
    },
    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
  });

###Source Data - Array data

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

import React, { useState } from 'react';
import ReactBootstrapTable 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: "custom-table-style1", // 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: "Zane", mobile: "974384", email: "zane@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 */}
      <ReactBootstrapTable {...userTableObj} />
    </div>
  );
}
export default App;

###Table

###End