@willchui/my-bootstrap-table

MyBootstrapTable component is sortable with pagination table, it is base on React Bootstrap Table and Pagination version 5.1.

Install

npm install --save @willchui/my-bootstrap-table

Usage

import React from 'react';
import MyBootstrapTable from '@willchui/my-bootstrap-table';
import '@willchui/my-bootstrap-table/dist/index.css';


const App = () => {
   /** 
   * It will retrieve the selected rows number from the MyBootstrapTable component.
   * @param {number[])} the selected rows number - index number on tabledata.
   */
  const callbackRowSelect = (data)=>{
    let results = "";
    data.forEach((d)=>{
         results += `${tabledata[d].id}, `;
    });
    console.log(results);
  };
  const header = {'datetime': {'title': 'Date', 'width': '200px', 'sortable':true, 'hide': false},
                  'userId': {'title': 'User ID', 'width': '80px', 'sortable':false, 'hide': true},
                  'id': {'title':'ID', 'width': '60px' , 'sortable':true},
                  'title': {'title':'Description', 'sortable':false}, 
                  'completed': {'title':'Complete', 'width': '200px', 'sortable':true}};
  const tabledata = [
    { "datetime": "12/25/2021 10:14:02 AM", "userId": 1, "id": 1001, "title": "delectus aut autem", "completed": false },
    { "datetime": "12/24/2021 10:12:02 AM", "userId": 1, "id": 1002, "title": "quis ut nam facilis et officia qui", "completed": false },
    { "datetime": "12/23/2021 10:11:05 AM", "userId": 1, "id": 1003, "title": "fugiat veniam minus", "completed": false },
    { "datetime": "12/22/2021 10:10:02 AM", "userId": 1, "id": 1004, "title": "et porro tempora", "completed": true },
    { "datetime": "12/24/2021 10:09:01 AM", "userId": 1, "id": 1005, "title": "laboriosam mollitia et enim quasi adipisci quia provident illum", "completed": false },
    { "datetime": "12/24/2021 10:09:00 AM", "userId": 1, "id": 1006, "title": "qui ullam ratione quibusdam voluptatem quia omnis", "completed": false },
    { "datetime": "12/24/2021 10:08:52 AM", "userId": 1, "id": 1007, "title": "illo expedita consequatur quia in", "completed": false },
    { "datetime": "12/24/2021 10:08:59 AM", "userId": 1, "id": 1008, "title": "quo adipisci enim quam ut ab", "completed": true },
    { "datetime": "12/24/2021 10:08:03 AM", "userId": 1, "id": 1009, "title": "molestiae perspiciatis ipsa", "completed": false },
    { "datetime": "12/23/2021 09:14:08 PM", "userId": 1, "id": 1010, "title": "illo est ratione doloremque quia maiores aut", "completed": true }
    ];                  
  return <MyBootstrapTable 
      classname="m-3" 
      header={header} 
      tabledata={tabledata} 
      paginationsize={5} 
      pagesize={5} 
      /** Please see the https://react-bootstrap.github.io/components/table API for more detials. */
      tableapi={{'bordered': true, 'borderless': false, 'hover': false, 
                 'responsive': true, 'size': 'sm', 'striped': true}}
      /** Please see the https://react-bootstrap.github.io/components/pagination API for more detials. */
      paginationapi={{'size': 'sm', 'bsPrefix': 'pagination justify-content-end'}}
      rowselectapi={{'enable':true, 'callback': null}}
      >
  </MyBootstrapTable>
}

export default App

API Prop

MyBootstrapTable Demo

Quick Demo in Stackblitz.

• version 1.1.0 - An example of delete row.
• version 1.1.1 - Implement a select all checkbox.
• version 1.1.2 - Add a highlight on the selected row.

License

MIT © William Chui