{"id":22280975,"url":"https://github.com/allenfang/react-bootstrap-table","last_synced_at":"2025-05-13T23:07:15.355Z","repository":{"id":30216995,"uuid":"33768009","full_name":"AllenFang/react-bootstrap-table","owner":"AllenFang","description":"A Bootstrap table built with React.js","archived":false,"fork":false,"pushed_at":"2024-05-17T16:53:37.000Z","size":74021,"stargazers_count":2226,"open_issues_count":440,"forks_count":776,"subscribers_count":83,"default_branch":"master","last_synced_at":"2025-04-10T00:14:35.842Z","etag":null,"topics":["bootstrap-table","react","react-table","table"],"latest_commit_sha":null,"homepage":"https://allenfang.github.io/react-bootstrap-table/","language":"JavaScript","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/AllenFang.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"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}},"created_at":"2015-04-11T08:06:37.000Z","updated_at":"2025-03-05T16:03:55.000Z","dependencies_parsed_at":"2022-08-09T09:15:27.875Z","dependency_job_id":"3bb52ae5-1d07-400f-8c9d-1852f9788057","html_url":"https://github.com/AllenFang/react-bootstrap-table","commit_stats":{"total_commits":1995,"total_committers":135,"mean_commits":"14.777777777777779","dds":"0.20401002506265664","last_synced_commit":"26d07defab759e4f9bce22d1d568690830b8d9d7"},"previous_names":[],"tags_count":185,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AllenFang%2Freact-bootstrap-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AllenFang%2Freact-bootstrap-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AllenFang%2Freact-bootstrap-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AllenFang%2Freact-bootstrap-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AllenFang","download_url":"https://codeload.github.com/AllenFang/react-bootstrap-table/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248131315,"owners_count":21052819,"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-table","react","react-table","table"],"created_at":"2024-12-03T16:11:16.555Z","updated_at":"2025-04-10T00:14:46.212Z","avatar_url":"https://github.com/AllenFang.png","language":"JavaScript","readme":"# react-bootstrap-table\n\n## [`react-bootstrap-table2`](https://github.com/react-bootstrap-table/react-bootstrap-table2) already released, this project will stop development after 2018Q2\n\n[![Join the chat at https://gitter.im/AllenFang/react-bootstrap-table](https://badges.gitter.im/AllenFang/react-bootstrap-table.svg)](https://gitter.im/AllenFang/react-bootstrap-table?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n\n[![NPM version][npm-badge]][npm] [![Build Status][travis-ci-image]][travis-ci-url]\n\n[![Dependency Status][deps-badge]][deps]\n[![devDependency Status][dev-deps-badge]][dev-deps]\n[![peerDependency Status][peer-deps-badge]][peer-deps]   \nIt's a [react.js](http://facebook.github.io/react/) table for bootstrap, named react-bootstrap-table. It's a configurable, functional table component and make you build a Bootstrap Table more efficiency and easy in your React application, However ```react-bootstrap-table``` support these features:\n\n- Striped, borderless, condensed table\n- Column align, hidden, width, sort, title, styling, customization\n- Table scrolling\n- Cell format\n- Pagination\n- Row selection\n- Table Search, Column filter\n- Cell editor\n- Insert \u0026 delete Row\n- Export to CSV\n- Rich function hooks\n- Header column span\n- Remote mode\n- Row expand\n- Key board navigation\n\n![Example](http://i.imgur.com/Ov1wMse.png)\nSee more about [react-bootstrap-table](http://allenfang.github.io/react-bootstrap-table/index.html) and explore more examples on [examples](https://github.com/AllenFang/react-bootstrap-table/tree/master/examples/js) folder\u003c/br\u003e\nCheck the \u003ca href='https://github.com/AllenFang/react-bootstrap-table/blob/master/CHANGELOG.md'\u003eCHANGELOG\u003c/a\u003e for more detail release notes.\n\n## Notes\n\n\n***`v4.0.0` released, this release mainly replace `react-toastr` with `react-s-alert`***\n1. Replace `react-toastr` by `react-s-alert`\n2. Use `prop-types`\n3. Support `bootstrap@4` and `bootstrap@3` both. If you use 4, please add `version='4'` on `\u003cBootstrapTable\u003e`\n4. No important features were implemented, most of bug fixes and improvement\n\n***After ```v2.4.4```, we move the css files to ```dist``` folder for allowing this repo can be hosted on [cdnjs](https://github.com/cdnjs/cdnjs)\u003cbr/\u003e***\n\n## Development\n```react-bootstrap-table``` dependencies on react.js and Bootstrap 3, also written by ES6 and use gulp and browserify for building and bundling.\n\nYou can use the following commands to prepare development\n```bash\n$ git clone https://github.com/AllenFang/react-bootstrap-table.git\n$ cd react-bootstrap-table\n$ npm install\n```\nSee the examples for `react-bootstrap-table`\n```bash\n$ npm start # see all examples, go to localhost:3004\n```\n\n## Usage\n### a.Install\n```bash\nnpm install react-bootstrap-table --save\n```\n\n### b.Import Module\nTo use react-bootstrap-table in your react app, you should import it first.\nYou can do this in two ways:\n\n##### With a module bundler\nWith a module bundler like [webpack](https://webpack.github.io/) that supports either CommonJS or ES2015 modules, use as you would anything else.  \nYou can include source maps on your build system to debug on development. Don't forget to Uglify on production.\n\n```js\n// in ECMAScript 6\nimport { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';\n// or in ECMAScript 5\nvar ReactBSTable = require('react-bootstrap-table');  \nvar BootstrapTable = ReactBSTable.BootstrapTable;\nvar TableHeaderColumn = ReactBSTable.TableHeaderColumn;\n```\n##### Browser global(window object)\nIn the `dist` folder you have a UMD bundle with source maps (`react-bootstrap-table.js`) as well as a minified version (`react-bootstrap-table.min.js`).\n\n```html\n\u003cscript src=\"path/to/react-bootstrap-table/dist/react-bootstrap-table.min.js\" /\u003e\n\u003cscript\u003e\n  var ReactBsTable = window.BootstrapTable;\n  //...\n\u003c/script\u003e\n```\n\nThe UMD build is also available on [npmcdn](https://npmcdn.com):\n\n```html\n// source maps: https://npmcdn.com/react-bootstrap-table/dist/react-bootstrap-table.js.map\n\u003cscript src=\"https://npmcdn.com/react-bootstrap-table/dist/react-bootstrap-table.js\"\u003e\u003c/script\u003e\n// or use the min version\n\u003cscript src=\"https://npmcdn.com/react-bootstrap-table/dist/react-bootstrap-table.min.js\"\u003e\u003c/script\u003e\n```\n\n### c.Import CSS\nFinally, you need to import the css file to your app:\n```html\n\u003c!-- we still need bootstrap css --\u003e\n\u003clink rel=\"stylesheet\" href=\"http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css\"\u003e\n\u003clink rel=\"stylesheet\" href=\"./dist/react-bootstrap-table.min.css\"\u003e\n```\nThe CSS files you can find in the css folder.\n\n### Quick Demo\n```js\n// products will be presented by react-bootstrap-table\nvar products = [{\n      id: 1,\n      name: \"Item name 1\",\n      price: 100\n  },{\n      id: 2,\n      name: \"Item name 2\",\n      price: 100\n  },........];\n// It's a data format example.\nfunction priceFormatter(cell, row){\n  return '\u003ci class=\"glyphicon glyphicon-usd\"\u003e\u003c/i\u003e ' + cell;\n}\n\nReact.render(\n  \u003cBootstrapTable data={products} striped={true} hover={true}\u003e\n      \u003cTableHeaderColumn dataField=\"id\" isKey={true} dataAlign=\"center\" dataSort={true}\u003eProduct ID\u003c/TableHeaderColumn\u003e\n      \u003cTableHeaderColumn dataField=\"name\" dataSort={true}\u003eProduct Name\u003c/TableHeaderColumn\u003e\n      \u003cTableHeaderColumn dataField=\"price\" dataFormat={priceFormatter}\u003eProduct Price\u003c/TableHeaderColumn\u003e\n  \u003c/BootstrapTable\u003e,\n\tdocument.getElementById(\"app\")\n);\n```\n### More react-bootstrap-table examples\nThe example source codes are in the [examples folder](https://github.com/AllenFang/react-bootstrap-table/tree/master/examples) folder. Run  the following commands for a live demo.\u003c/br\u003e\n```bash\n$ git clone https://github.com/AllenFang/react-bootstrap-table.git\n$ cd react-bootstrap-table\n$ npm install\n$ npm start # after start, open browser and go to http://localhost:3004\n```\n\n### [Documentation](http://allenfang.github.io/react-bootstrap-table/docs.html)\n\n### Thanks\n**[luqin](https://github.com/luqin)**  \nHelp this project to integrate a better examples demo, add travis \u0026 badge, code formatting, give a lot of suggestions and bugs report.   \n**[Whien](https://github.com/madeinfree)**  \nImplement a lots of awesome new feature and also fix some bugs and enhancements.   \n**[Parth Prajapati](https://github.com/prajapati-parth)**  \nHelp to check issues and give great and useful instructions.   \n**[khinlatt](https://github.com/khinlatt)**  \nContribute export csv, multi-search and bug fixing.  \n**[dana](https://github.com/dana2208)**  \nContribute a new colum-filter design and great feedback given.  \n**[tbaeg](https://github.com/tbaeg)**  \nBugs report and give some bootstrap and css suggestions actively.  \n**[bluedarker](https://github.com/bluedarker)**  \nContribute the edit format \u0026 validation on cell editing and row insertion. Improve the custom styling.  \n**[Sofia Silva](https://github.com/staminaloops)**  \nBug reports and fixing actively.  \n**[frontsideair](https://github.com/frontsideair)**  \nFixing bugs and give improvement for functionality.  \n**[aaronhayes](https://github.com/aaronhayes)**  \nBugs report and enhance the cell formatting.  \n**[Reggino](https://github.com/Reggino)**  \nImplement the TableDataSet component.  \n\n[npm-badge]: http://badge.fury.io/js/react-bootstrap-table.svg\n[npm]: http://badge.fury.io/js/react-bootstrap-table\n\n[deps-badge]: https://david-dm.org/AllenFang/react-bootstrap-table.svg\n[deps]: https://david-dm.org/AllenFang/react-bootstrap-table\n\n[dev-deps-badge]: https://david-dm.org/AllenFang/react-bootstrap-table/dev-status.svg\n[dev-deps]: https://david-dm.org/AllenFang/react-bootstrap-table#info=devDependencies\n\n[peer-deps-badge]: https://david-dm.org/AllenFang/react-bootstrap-table/peer-status.svg\n[peer-deps]: https://david-dm.org/AllenFang/react-bootstrap-table#info=peerDependencies\n\n[travis-ci-image]: https://travis-ci.org/AllenFang/react-bootstrap-table.svg\n[travis-ci-url]: https://travis-ci.org/AllenFang/react-bootstrap-table\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fallenfang%2Freact-bootstrap-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fallenfang%2Freact-bootstrap-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fallenfang%2Freact-bootstrap-table/lists"}