Giter VIP home page Giter VIP logo

react-bootstrap-table's Introduction

react-bootstrap-table

Join the chat at https://gitter.im/AllenFang/react-bootstrap-table

NPM version Build Status

Dependency Status devDependency Status peerDependency Status

It's a react.js table for bootstrap, named reactbsTable. 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:

  • column align
  • column hidden
  • scrolling table
  • data sort
  • cell format
  • pagination
  • row selection
  • column filter
  • cell edit with multi type editor
  • insert & delete Row
  • row and column style customize
  • search
  • export CSV file
  • rich function hooks
  • large columns table

You can see more about this component on here. and example is on here.
Check the CHANGELOG for more detail release notes.

Development

react-bootstrap-table dependencies on react 0.14.x and Bootstrap 3 written by ES6 and use gulp and browserify for building and bundling.

You can use the following commands to prepare development

$ git clone https://github.com/AllenFang/react-bootstrap-table.git
$ cd react-bootstrap-table
$ npm install

Use gulp to build the react-bootstrap-table

$ gulp dev  #for development
$ gulp example-server #see all examples, go to localhost:3004
$ gulp prod #for production

Usage

a.Install

npm install react-bootstrap-table --save

b.Import Module

Use react-bootstrap-table in your react app, you should import this component as first. About importing this component, there'r two way in the following you can choose:

Module(CommonJS/AMD)
import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table';  // in ECMAScript 6
// or in ECMAScript 5
var ReactBSTable = require("react-bootstrap-table");  
var BootstrapTable = ReactBSTable.BootstrapTable;
var TableHeaderColumn = ReactBSTable.TableHeaderColumn;
Browser global(window object)
<script src="path/to/react-bootstrap-table/dist/react-bootstrap-table.min.js" />
<script>
  var ReactBsTable = window.BootstrapTable;
  //...
<script/>

c.Import CSS

Finally, you need to import the css file to your app, there are two css file you can choose.
react-bootstrap-table-all.min.css include toastr.
react-bootstrap-table.min.css doesn't include toastr.
Notes: react-bootstrap-table use toastr to alarm some message to user.

<link rel="stylesheet" href="./css/react-bootstrap-table-all.min.css">

CSS files you can find in the css folder.

Quick Demo

// products will be presented by react-bootstrap-table
var products = [{
      id: 1,
      name: "Item name 1",
      price: 100
  },{
      id: 2,
      name: "Item name 2",
      price: 100
  },........];
// It's a data format example.
function priceFormatter(cell, row){
  return '<i class="glyphicon glyphicon-usd"></i> ' + cell;
}

React.render(
  <BootstrapTable data={products} striped={true} hover={true}>
      <TableHeaderColumn dataField="id" isKey={true} dataAlign="center" dataSort={true}>Product ID</TableHeaderColumn>
      <TableHeaderColumn dataField="name" dataSort={true}>Product Name</TableHeaderColumn>
      <TableHeaderColumn dataField="price" dataFormat={priceFormatter}>Product Price</TableHeaderColumn>
  </BootstrapTable>,
	document.getElementById("app")
);

See react-bootstrap-table examples

The example source codes is in the examples folder. Run the following commands for a live demo.

$ git clone https://github.com/AllenFang/react-bootstrap-table.git
$ cd react-bootstrap-table
$ npm install
$ gulp example-server #after start, open browser and go to http://localhost:3004

Documentation

Please see: docs

Thanks

luqin
Help this project to integrate a better examples demo, add travis & badge, code formatting, give a lot of suggestions and bugs report.
khinlatt
Contribute export csv, multi-search and bug fixing.
tbaeg
Bugs report and give some bootstrap and css suggestions actively.
bluedarker
Contribute the edit format & validation on cell editing and row insertion. Improve the custom styling.
Sofia Silva
Bug reports and fixing actively.
frontsideair
Fixing bugs and give improvement for functionality.
aaronhayes
Bugs report and enhance the cell formatting.
Reggino
Implement the TableDataSet component.

react-bootstrap-table's People

Contributors

aaronhayes avatar allenfang avatar anenth avatar bastiao avatar bluedarker avatar dana2208 avatar deadbeef404 avatar gitter-badger avatar jrsquared avatar julusian avatar kamransyed avatar khinlatt avatar kirstein avatar reggi avatar reggino avatar sirreal avatar sridhar-arumugam avatar staminaloops avatar tbo avatar vedmalex avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.