Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/imballinst/react-bs-datatable
Bootstrap datatable without jQuery. Features include: filter, sort, pagination, checkbox, and control customization.
https://github.com/imballinst/react-bs-datatable
bootstrap datatable javascript react reactjs typescript
Last synced: 5 days ago
JSON representation
Bootstrap datatable without jQuery. Features include: filter, sort, pagination, checkbox, and control customization.
- Host: GitHub
- URL: https://github.com/imballinst/react-bs-datatable
- Owner: imballinst
- License: mit
- Created: 2017-01-21T03:38:27.000Z (almost 8 years ago)
- Default Branch: main
- Last Pushed: 2024-05-10T00:37:21.000Z (6 months ago)
- Last Synced: 2024-10-13T05:50:00.506Z (25 days ago)
- Topics: bootstrap, datatable, javascript, react, reactjs, typescript
- Language: TypeScript
- Homepage: https://imballinst.github.io/react-bs-datatable
- Size: 10.2 MB
- Stars: 59
- Watchers: 4
- Forks: 20
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# React Bootstrap Datatable
[](https://bundlephobia.com/package/react-bs-datatable) [](https://badge.fury.io/js/react-bs-datatable) [](https://www.npmjs.com/package/react-bs-datatable)
Inspired by [react-data-components](https://github.com/carlosrocha/react-data-components). This library uses [react-bootstrap](http://react-bootstrap.github.io/) stylesheets and javascripts. In addition, this library also uses [font-awesome](http://fontawesome.io/) 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](https://github.com/imballinst/react-bs-datatable/tree/v1).
## Table of Contents
- [What's new in v3?](#whats-new-in-v3)
- [Migration guide](#migration-guide)
- [Installation](#installation)
- [Usage](#usage)
- [Storybook Demo](#storybook-demo)
- [API reference](#api-reference)
- [Contributing](#contributing)
## What's new in v3?
- New build and publish system. Previously, this library used Webpack for bundling etc.—now it only uses `tsc` to compile the TypeScript files to output all files to the `lib` folder.
- 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](https://bundlephobia.com/package/[email protected]) 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-awesome` CSS with the [React components of Font Awesome](https://fontawesome.com/v5.15/how-to-use/on-the-web/using-with/react). 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.
## Migration guide
Please read [this guide](./MIGRATION_GUIDE.md) if you are migrating from v2.
## Installation
With `npm`:
```bash
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@0
```
With `yarn`:
```bash
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@0
```
## Usage
For 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).
```jsx
import React from '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.
const headers = [
{ 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.
const body = Array.from(new Array(57), () => {
const rd = (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.
function TableComponent() {
return (
);
}
```
## Storybook Demo
Head to https://imballinst.github.io/react-bs-datatable to see all of the features in action.
## API Reference
Visit the [API reference](./api/README.md) for more details.
## Contributing
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](https://github.com/changesets/changesets), please run this command:
```shell
yarn changeset
```
Then follow the promppt accordingly. The rule of thumb is as follows:
1. Major bump: breaking changes
2. Minor bump: new features
3. Patch bump: bug fixes, docs fixes, refactors
## License
See license in [LICENSE](./LICENSE).