{"id":16635102,"url":"https://github.com/imballinst/react-bs-datatable","last_synced_at":"2025-04-10T05:00:00.795Z","repository":{"id":16274088,"uuid":"79621359","full_name":"imballinst/react-bs-datatable","owner":"imballinst","description":"Bootstrap datatable without jQuery. Features include: filter, sort, pagination, checkbox, and control customization.","archived":false,"fork":false,"pushed_at":"2024-05-10T00:37:21.000Z","size":10715,"stargazers_count":59,"open_issues_count":13,"forks_count":20,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-10-13T05:50:00.506Z","etag":null,"topics":["bootstrap","datatable","javascript","react","reactjs","typescript"],"latest_commit_sha":null,"homepage":"https://imballinst.github.io/react-bs-datatable","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/imballinst.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["imballinst"]}},"created_at":"2017-01-21T03:38:27.000Z","updated_at":"2024-04-22T18:32:41.000Z","dependencies_parsed_at":"2023-11-23T14:25:43.963Z","dependency_job_id":"69f8fbaa-b261-4a21-9c25-bd7cf199a6dd","html_url":"https://github.com/imballinst/react-bs-datatable","commit_stats":{"total_commits":231,"total_committers":11,"mean_commits":21.0,"dds":"0.19913419913419916","last_synced_commit":"8412c264f55c427e42e100d786cc6484648b2f14"},"previous_names":[],"tags_count":93,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imballinst%2Freact-bs-datatable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imballinst%2Freact-bs-datatable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imballinst%2Freact-bs-datatable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imballinst%2Freact-bs-datatable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/imballinst","download_url":"https://codeload.github.com/imballinst/react-bs-datatable/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248161267,"owners_count":21057554,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","datatable","javascript","react","reactjs","typescript"],"created_at":"2024-10-12T05:49:59.969Z","updated_at":"2025-04-10T05:00:00.776Z","avatar_url":"https://github.com/imballinst.png","language":"TypeScript","readme":"# React Bootstrap Datatable\n\n[![minzipped size](https://img.shields.io/bundlephobia/minzip/react-bs-datatable)](https://bundlephobia.com/package/react-bs-datatable) [![npm version](https://badge.fury.io/js/react-bs-datatable.svg)](https://badge.fury.io/js/react-bs-datatable) [![downloads per week](https://img.shields.io/npm/dw/react-bs-datatable)](https://www.npmjs.com/package/react-bs-datatable)\n\n---\n\n**WARNING**: this library is not maintained anymore. Please use other libraries that are more maintained and flexible, such as https://tanstack.com/table/latest.\n\n---\n\nInspired 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.\n\nThis 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).\n\n## Table of Contents\n\n- [What's new in v3?](#whats-new-in-v3)\n- [Migration guide](#migration-guide)\n- [Installation](#installation)\n- [Usage](#usage)\n- [Storybook Demo](#storybook-demo)\n- [API reference](#api-reference)\n- [Contributing](#contributing)\n\n## What's new in v3?\n\n- 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.\n- 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.\n- Updated Storybook. Previously, this library still used `storiesOf`, but now it is using Component Story Format (CSF), which was available starting from Storybook v5.\n- Lots of optimizations, bundle size in particular. As reported by [Bundlephobia](https://bundlephobia.com/package/react-bs-datatable@3.0.0-alpha.6) 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.\n- 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.\n- Drop support for all other libraries. This library will now only support Bootstrap tables.\n- Auto generate component APIs.\n\n## Migration guide\n\nPlease read [this guide](./MIGRATION_GUIDE.md) if you are migrating from v2.\n\n## Installation\n\nWith `npm`:\n\n```bash\nnpm 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\n```\n\nWith `yarn`:\n\n```bash\nyarn 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\n```\n\n## Usage\n\nFor 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).\n\n```jsx\nimport React from 'react';\nimport {\n  DatatableWrapper,\n  Filter,\n  Pagination,\n  PaginationOpts,\n  TableBody,\n  TableHeader\n} from 'react-bs-datatable';\nimport { Col, Row, Table } from 'react-bootstrap';\n\nimport 'bootstrap/dist/css/bootstrap.min.css';\n\n// Create table headers consisting of 4 columns.\nconst headers = [\n  { title: 'Username', prop: 'username' },\n  { title: 'Name', prop: 'realname' },\n  { title: 'Location', prop: 'location' }\n];\n\n// Randomize data of the table columns.\n// Note that the fields are all using the `prop` field of the headers.\nconst body = Array.from(new Array(57), () =\u003e {\n  const rd = (Math.random() * 10).toFixed(1);\n\n  if (rd \u003e 0.5) {\n    return {\n      username: 'i-am-billy',\n      realname: `Billy ${rd}`,\n      location: 'Mars'\n    };\n  }\n\n  return {\n    username: 'john-nhoj',\n    realname: `John ${rd}`,\n    location: 'Saturn'\n  };\n});\n\n// Then, use it in a component.\nfunction TableComponent() {\n  return (\n    \u003cDatatableWrapper body={body} headers={headers}\u003e\n      \u003cRow className=\"mb-4\"\u003e\n        \u003cCol\n          xs={12}\n          lg={4}\n          className=\"d-flex flex-col justify-content-end align-items-end\"\n        \u003e\n          \u003cFilter /\u003e\n        \u003c/Col\u003e\n        \u003cCol\n          xs={12}\n          sm={6}\n          lg={4}\n          className=\"d-flex flex-col justify-content-lg-center align-items-center justify-content-sm-start mb-2 mb-sm-0\"\n        \u003e\n          \u003cPaginationOpts /\u003e\n        \u003c/Col\u003e\n        \u003cCol\n          xs={12}\n          sm={6}\n          lg={4}\n          className=\"d-flex flex-col justify-content-end align-items-end\"\n        \u003e\n          \u003cPagination /\u003e\n        \u003c/Col\u003e\n      \u003c/Row\u003e\n      \u003cTable\u003e\n        \u003cTableHeader /\u003e\n        \u003cTableBody /\u003e\n      \u003c/Table\u003e\n    \u003c/DatatableWrapper\u003e\n  );\n}\n```\n\n## Storybook Demo\n\nHead to https://imballinst.github.io/react-bs-datatable to see all of the features in action.\n\n## API Reference\n\nVisit the [API reference](./api/README.md) for more details.\n\n## Contributing\n\nFeel 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:\n\n```shell\nyarn changeset\n```\n\nThen follow the promppt accordingly. The rule of thumb is as follows:\n\n1. Major bump: breaking changes\n2. Minor bump: new features\n3. Patch bump: bug fixes, docs fixes, refactors\n\n## License\n\nSee license in [LICENSE](./LICENSE).\n","funding_links":["https://github.com/sponsors/imballinst"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimballinst%2Freact-bs-datatable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fimballinst%2Freact-bs-datatable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimballinst%2Freact-bs-datatable/lists"}