WARNING: this library is not maintained anymore. Please use other libraries that are more maintained and flexible, such as https://tanstack.com/table/latest.
Inspired by react-data-components. This library uses react-bootstrap stylesheets and javascripts. In addition, this library also uses font-awesome for the table header, clear filter, and other stuffs.
This is the v3 version of the library. To see the v2 version of README, please visit the v1 branch.
- New build and publish system. Previously, this library used Webpack for bundling etc.—now it only uses
tscto compile the TypeScript files to output all files to thelibfolder. - ESM and CommonJS are now supported. There are 2 new TypeScript configurations in the project, one is used for building ESM and the other is for building CommonJS.
- Updated Storybook. Previously, this library still used
storiesOf, but now it is using Component Story Format (CSF), which was available starting from Storybook v5. - Lots of optimizations, bundle size in particular. As reported by Bundlephobia for the Alpha version, the minified size is down to just a quarter of what it was, whereas the minified + gzip is down to a third of what it was.
- Replaced
font-awesomeCSS with the React components of Font Awesome. This allowed us to enable tree shaking, which resulted in the optimization point above. - Drop support for all other libraries. This library will now only support Bootstrap tables.
- Auto generate component APIs.
Please read this guide if you are migrating from v2.
With npm:
npm install --save react-bs-datatable@3 bootstrap@5 react-bootstrap@2 @fortawesome/fontawesome-svg-core@6 @fortawesome/free-solid-svg-icons@6 @fortawesome/react-fontawesome@0With yarn:
yarn add react-bs-datatable@3 bootstrap@5 react-bootstrap@2 @fortawesome/fontawesome-svg-core@6 @fortawesome/free-solid-svg-icons@6 @fortawesome/react-fontawesome@0For more complete examples, please visit this sandbox link (https://codesandbox.io/s/react-bs-datatable-3-typescript-bn234b) or the Storybook demo (https://imballinst.github.io/react-bs-datatable).
importReactfrom'react';import{DatatableWrapper,Filter,Pagination,PaginationOpts,TableBody,TableHeader}from'react-bs-datatable';import{Col,Row,Table}from'react-bootstrap';import'bootstrap/dist/css/bootstrap.min.css';// Create table headers consisting of 4 columns.constheaders=[{title: 'Username',prop: 'username'},{title: 'Name',prop: 'realname'},{title: 'Location',prop: 'location'}];// Randomize data of the table columns.// Note that the fields are all using the `prop` field of the headers.constbody=Array.from(newArray(57),()=>{constrd=(Math.random()*10).toFixed(1);if(rd>0.5){return{username: 'i-am-billy',realname: `Billy ${rd}`,location: 'Mars'};}return{username: 'john-nhoj',realname: `John ${rd}`,location: 'Saturn'};});// Then, use it in a component.functionTableComponent(){return(<DatatableWrapperbody={body}headers={headers}><RowclassName="mb-4"><Colxs={12}lg={4}className="d-flex flex-col justify-content-end align-items-end"><Filter/></Col><Colxs={12}sm={6}lg={4}className="d-flex flex-col justify-content-lg-center align-items-center justify-content-sm-start mb-2 mb-sm-0"><PaginationOpts/></Col><Colxs={12}sm={6}lg={4}className="d-flex flex-col justify-content-end align-items-end"><Pagination/></Col></Row><Table><TableHeader/><TableBody/></Table></DatatableWrapper>);}Head to https://imballinst.github.io/react-bs-datatable to see all of the features in action.
Visit the API reference for more details.
Feel free to contribute by creating issues and/or pull requests. I will do my best to address them as fast as I can. Additionally, after working on your task, since we are using changesets, please run this command:
yarn changesetThen follow the promppt accordingly. The rule of thumb is as follows:
- Major bump: breaking changes
- Minor bump: new features
- Patch bump: bug fixes, docs fixes, refactors
See license in LICENSE.