{"id":26470624,"url":"https://github.com/erikbavenstrand/react-bootstrap-table-plus","last_synced_at":"2026-04-11T21:48:40.640Z","repository":{"id":112180944,"uuid":"129122498","full_name":"ErikBavenstrand/react-bootstrap-table-plus","owner":"ErikBavenstrand","description":"react-bootstrap-table with some additional features.","archived":false,"fork":false,"pushed_at":"2018-04-24T15:13:29.000Z","size":529,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-29T15:42:25.742Z","etag":null,"topics":["bootstrap","bootstrap-table","javascript","js"],"latest_commit_sha":null,"homepage":"https://bavenstrand.se","language":"JavaScript","has_issues":false,"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/ErikBavenstrand.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2018-04-11T16:26:32.000Z","updated_at":"2020-07-09T09:18:31.000Z","dependencies_parsed_at":"2023-03-14T22:46:30.573Z","dependency_job_id":null,"html_url":"https://github.com/ErikBavenstrand/react-bootstrap-table-plus","commit_stats":{"total_commits":17,"total_committers":1,"mean_commits":17.0,"dds":0.0,"last_synced_commit":"5093c4b1d6c75d42afd80ba51dadef5948461edb"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ErikBavenstrand%2Freact-bootstrap-table-plus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ErikBavenstrand%2Freact-bootstrap-table-plus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ErikBavenstrand%2Freact-bootstrap-table-plus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ErikBavenstrand%2Freact-bootstrap-table-plus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ErikBavenstrand","download_url":"https://codeload.github.com/ErikBavenstrand/react-bootstrap-table-plus/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244489565,"owners_count":20461018,"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","bootstrap-table","javascript","js"],"created_at":"2025-03-19T19:22:32.737Z","updated_at":"2026-04-11T21:48:40.603Z","avatar_url":"https://github.com/ErikBavenstrand.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-bootstrap-table-plus\n\n## [`react-bootstrap-table`](https://github.com/react-bootstrap-table/react-bootstrap-table) is the core of this. This is the same with some additional functionality.\n\nIt's a [react.js](http://facebook.github.io/react/) table for bootstrap, named react-bootstrap-table-plus. 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-plus``` support these features:\n\n### react-bootstrap-table features:\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### react-bootstrap-table-plus unique features:\n- Edit button\n\n## Documentation for react-bootstrap-table\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## To enable the Edit button:\nAdd ```editRow={ true }``` to the ```\u003cBootstrapTable\u003e``` just as you would with the ```addRow={ true }```\n\n![Example](https://i.imgur.com/Btk74Xb.png)\n![Example](https://i.imgur.com/VoFjKP3.png)\n\n## Notes\n\n\n***`v1.0.0` released, this release adds an Edit button to the toolbar***\n\n\n## Usage\n### a.Install\n```bash\nnpm install react-bootstrap-table-plus --save\n```\n\n### b.Import Module\nTo use react-bootstrap-table-plus in your react app, you should import it first.\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-plus';\n// or in ECMAScript 5\nvar ReactBSTable = require('react-bootstrap-table-plus');  \nvar BootstrapTable = ReactBSTable.BootstrapTable;\nvar TableHeaderColumn = ReactBSTable.TableHeaderColumn;\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\n### [Documentation](http://allenfang.github.io/react-bootstrap-table/docs.html)\n\n### Thanks\n**[AllenFang](https://github.com/allenfang)**  \nOriginal creator of the base of this project.   ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ferikbavenstrand%2Freact-bootstrap-table-plus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ferikbavenstrand%2Freact-bootstrap-table-plus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ferikbavenstrand%2Freact-bootstrap-table-plus/lists"}