Columns props

How to use Bootstrap 4 from a CDN in React

Let’s see the first method of integrating Bootstrap with React i.e via a CDN. This approach is the easist one since you only need to add a tag pointing to a Bootstrap CDN in the file of your React application.


Provided that you have generated a React project with the tool, navigate to your project’s root folder and open the file then add the following code in the section:

If you need to use Bootstrap components that depend on JavaScript/jQuery in your React application, you also need to include jQuery, Popper.js and Bootstrap.js in your document. Add the following imports before the closing tag:

That’s it. You have now added Bootstrap in your React application. You should be able to use all the CSS utilities and UI components available from Bootstrap in your application.

About the Project

There are a few core concepts to understand in order to make the most out of this library.

  1. Your content is expected to be composed via props.children rather than using named props to pass in Components.

    constExample=(props)=>{return(<p>This is a tooltip <TooltipTrigger tooltip={TooltipContent}>example<TooltipTrigger>!<p>);}constPreferredExample=(props)=>{return(<p>      This is a <a href="#" id="TooltipExample">tooltip<a> example.<Tooltip target="TooltipExample"><TooltipContent><Tooltip><p>);}
  2. Attributes in this library are used to pass in state, conveniently apply modifier classes, enable advanced functionality (like tether), or automatically include non-content based elements.

    Examples:

    • — current state for items like dropdown, popover, tooltip
    • — callback for toggling in the controlling component
    • — applies color classes, ex:
    • — for controlling size classes. ex:
    • — customize component output by passing in an element name or Component
    • boolean based props (attributes) when possible for alternative style classes or content

Select Filter

A quick example:

importfilterFactory,{selectFilter}from'react-bootstrap-table2-filter';constselectOptions={'good',1'Bad',2'unknown'};constcolumns=...,{  dataField'quality',  text'Product Quailty',formattercell=> selectOptionscell,  filterselectFilter({    options selectOptions})};<BootstrapTable keyField='id' data={ products } columns={ columns } filter={filterFactory()}>

Following is an example for custom select filter:

importfilterFactory,{selectFilter,Comparator}from'react-bootstrap-table2-filter';constqualityFilter=selectFilter({  options selectOptions,  placeholder'My Custom PlaceHolder',  className'my-custom-text-filter',  defaultValue'2',  comparatorComparator.LIKE,  style{...},  withoutEmptyOptiontrue  id'id',});
constselectOptions={ value, label'good'},{ value1, label'Bad'},{ value2, label'unknown'};constcolumns=...,{  dataField'quality',  text'Product Quailty',formattercell=>selectOptions.find(opt=>opt.value=== cell).label,  filterselectFilter({    options selectOptions})};
constselectOptions={ value, label'good'},{ value1, label'Bad'},{ value2, label'unknown'};constcolumns=...,{  dataField'quality',  text'Product Quailty',formattercell=>selectOptions.find(opt=>opt.value=== cell).label,  filterselectFilter({options()=> selectOptions})};

The benifit is will render the select options by the order of array.

A Sample Page Example With Multiple Components

In the following example, we have used multiple Bootstrap components in a single sample page design. 

Run the following code to create such a sample page.

import React from 'react';
import './App.scss';
import { Navbar, Nav, NavDropdown, Form,  FormControl, Button, Table} from 'react-bootstrap';
function App() {
  return (
    <div className="App">
      <header>
        <Navbar expand="lg" variant="dark" bg="dark">
          <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
            <Navbar.Toggle aria-controls="basic-navbar-nav" />
              <Navbar.Collapse id="basic-navbar-nav">
                <Nav className="mr-auto">
                  <Nav.Link href="#home">Home</Nav.Link>
                  <Nav.Link href="#link">Link</Nav.Link>
                  <NavDropdown title="Dropdown" id="basic-nav-dropdown">
                    <NavDropdown.Item>Action</NavDropdown.Item>
                    <NavDropdown.Item>Another action</NavDropdown.Item>
                    <NavDropdown.Item>Something</NavDropdown.Item>
                    <NavDropdown.Divider />
                    <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
                </NavDropdown>
              </Nav>
              <Form inline>
                <FormControl type="text" placeholder="Search" className="mr-sm-2" />
                <Button variant="outline-success">Search</Button>
              </Form>
          </Navbar.Collapse>
        </Navbar>
      </header>
      <div className="container">
        <div className="row mt-5">
            <div className="col-lg-4 mb-4 grid-margin">
              <div className="card h-100">
                  <h4 className="card-header">Card Title</h4>
                  <div className="card-body">
                    <p className="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque.</p>
                  </div>
                  <div className="card-footer">
                    <Button variant="btn btn-primary">Learn More</Button>
                  </div>
              </div>
            </div>
            <div className="col-lg-4 mb-4 grid-margin">
              <div className="card h-100">
                  <h4 className="card-header">Card Title</h4>
                  <div className="card-body">
                    <p className="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis ipsam eos, nam perspiciatis natus commodi similique totam consectetur praesentium molestiae atque exercitationem ut consequuntur, sed eveniet, magni nostrum sint fuga.</p>
                  </div>
                  <div className="card-footer">
                    <Button variant="btn btn-primary">Learn More</Button>
                  </div>
              </div>
            </div>
            <div className="col-lg-4 mb-4 grid-margin">
              <div className="card h-100">
                  <h4 className="card-header">Card Title</h4>
                  <div className="card-body">
                    <p className="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque.</p>
                  </div>
                  <div className="card-footer">
                    <Button variant="btn btn-primary">Learn More</Button>
                  </div>
              </div>
            </div>
        </div>
        <div className="row mb-4">
          <div className="col-sm-12 grid-margin">
            <div className="card h-100">
              <h4 className="card-header">Table</h4>
              <div className="card-body">
                <Table striped bordered hover>
                  <thead>
                    <tr>
                      <th>#</th>
                      <th>First Name</th>
                      <th>Last Name</th>
                      <th>Username</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>1</td>
                      <td>Mark</td>
                      <td>Otto</td>
                      <td>@mdo</td>
                    </tr>
                    <tr>
                      <td>2</td>
                      <td>Jacob</td>
                      <td>Thornton</td>
                      <td>@fat</td>
                    </tr>
                    <tr>
                      <td>3</td>
                      <td colSpan="2">Larry the Bird</td>

                    </tr>
                  </tbody>
                </Table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
export default App;

Looking for more? Check out all our react admin templates and our list of recommended react dashboard templates here!

Lists

All lists—, , and —have their removed and a . Nested lists have no .

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

For simpler styling, clear hierarchy, and better spacing, description lists have updated s. s reset to and add . s are bolded.

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Adding Bootstrap in React Using NPM

You can also import Bootstrap in your React application by installing it from .

Provided that you have a React project. Open a new terminal window, navigate to your project’s folder and run the following command:

After installing the package, you will need to import it in your React app entry file.

If you generated your project using the tool; open the file and add the following code:

You can now use the CSS classes and utilities in your application but if you need to use the JavaScript components, you will also need to install the and packages from npm. In your terminal, run the following commands:

Next, go to the file and add the following imports:

That’s it. You can now use the full power of Bootstrap in your React application.

Text Filter

Following is a quick demo for enable the column filter on Product Price column!!

importfilterFactory,{textFilter}from'react-bootstrap-table2-filter';constcolumns=...,{  dataField'price',  text'Product Price',  filtertextFilter()};<BootstrapTable keyField='id' data={ products } columns={ columns } filter={filterFactory()}>

In addition, we preserve all of the filter features and functionality in legacy , but in different way to do it:

importfilterFactory,{textFilter,Comparator}from'react-bootstrap-table2-filter';constpriceFilter=textFilter({  placeholder'My Custom PlaceHolder',  className'my-custom-text-filter',  defaultValue'test',  comparatorComparator.EQ,  caseSensitivetrue,  style{...},  delay1000,  id'id',});

Export CSV

There are two steps to enable the export CSV functionality:

  1. Give prop as on .
  2. Render with . The position of is depends on you.
importToolkitProvider,{CSVExport}from'react-bootstrap-table2-toolkit';const{ExportCSVButton}= CSVExport;<ToolkitProvider  keyField="id"  data={ products }  columns={ columns }  exportCSV>{props=>(<div><ExportCSVButton {...props.csvProps}>Export CSV!!<ExportCSVButton><hr ><BootstrapTable {...props.baseProps}><div>)}<ToolkitProvider>

Custom the csv file name.

Custom the csv file separator.

Default is . Give true to avoid to attach the csv header.

Default is . Give to attach the table footer if enabled.

Default is .

Default is . Change to update the blob type of the exported file.

Default is . will only export current data which display on table.

Default is . will only export the data which is selected.


Default is . will only export the data which is filtered/searched.

JavaScript behavior

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to , as in .

Name Type Default Description
animation boolean true Apply a CSS fade transition to the toast
autohide boolean true Auto hide the toast
delay number Delay hiding the toast (ms)

Methods

Asynchronous methods and transitions

All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

Attaches a toast handler to an element collection.

Reveals an element’s toast. Returns to the caller before the toast has actually been shown (i.e. before the event occurs). You have to manually call this method, instead your toast won’t show.

Hides an element’s toast. Returns to the caller before the toast has actually been hidden (i.e. before the event occurs). You have to manually call this method if you made to .

Hides an element’s toast. Your toast will remain on the DOM but won’t show anymore.

Event Type Description
show.bs.toast This event fires immediately when the instance method is called.
shown.bs.toast This event is fired when the toast has been made visible to the user.
hide.bs.toast This event is fired immediately when the instance method has been called.
hidden.bs.toast This event is fired when the toast has finished being hidden from the user.

Getting Started

Here is a detailed and step by step guide on how to start a react project with React Bootstrap. There are multiple ways through which you can start a project. We will be using Create React App in our example, as it offers a comfortable environment to developers when building single page applications. The first step is to a install Create React App in your system.

Installing Create React App in Your System

You can use the following command to install Create React App on your system. 

$ npm install create-react-app

After installing Create React App, create a new project with the help of the code given below.

$ create-react-app my-app
$ cd my-app
$ npm start

The newly created project will now be running in your web browser. 

Installing React Bootstrap

The command you will need to run to install React Bootstrap on your system is given below.

$ npm install react-bootstrap

In order to ensure that React Bootstrap is working smoothly and perfectly, you must install Bootstrap too. Use the following code to install Bootstrap.

$ npm install bootstrap

Help Wanted

I did this for a work project, and, frankly, we’ve gotten what we needed out of it. I’d love to see this cleaned up and maybe even maintained… but I just don’t have the time myself. I’ll accept merge requests, and fight with the build system… but that’s basically it. If someone would like to step in, just let me know and I’ll add you to the project. Just open an issue, and I’ll respond.

Wanting to contribute, but not take over the reigns? The things that are really holding this project back are, as I can see it:

  • Undocumented/confusing build system.
    • The whole thing seems like it adds a lot of complexity, for very little gain.
    • Making a release should be a single command
    • Getting started with development should be very simple
  • Switch to ES2015

I’ll add more as I think of them / have the time.

Examples

Hover over the links below to see tooltips:

Tight pants next level keffiyeh haven’t heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney’s fixie sustainable quinoa 8-bit american apparel terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney’s cleanse vegan chambray. A really ironic artisan , scenester farm-to-table banksy Austin freegan cred raw denim single-origin coffee viral.

Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left.

Tooltip on top Tooltip on right Tooltip on bottom Tooltip on left Tooltip with HTML

And with custom HTML added:

Overview

Things to know when using the tooltip plugin:

  • Tooltips rely on the 3rd party library Popper.js for positioning. You must include popper.min.js before bootstrap.js or use / which contains Popper.js in order for tooltips to work!
  • If you’re building our JavaScript from source, it .
  • Tooltips are opt-in for performance reasons, so you must initialize them yourself.
  • Tooltips with zero-length titles are never displayed.
  • Specify to avoid rendering problems in more complex components (like our input groups, button groups, etc).
  • Triggering tooltips on hidden elements will not work.
  • Tooltips for or elements must be triggered on a wrapper element.
  • When triggered from hyperlinks that span multiple lines, tooltips will be centered. Use on your s to avoid this behavior.
  • Tooltips must be hidden before their corresponding elements have been removed from the DOM.
  • Tooltips can be triggered thanks to an element inside a shadow DOM.

The animation effect of this component is dependent on the media query. See the .

Got all that? Great, let’s see how they work with some examples.

Classes

Aside from our Reboot, a cross-browser normalization stylesheet, all our styles aim to use classes as selectors. This means steering clear of type selectors (e.g., ) and extraneous parent classes (e.g., ) that make styles too specific to easily override.

As such, components should be built with a base class that houses common, not-to-be overridden property-value pairs. For example, and . We use for all the common styles like , , and . We then use modifiers like to add the color, background-color, border-color, etc.

Modifier classes should only be used when there are multiple properties or values to be changed across multiple variants. Modifiers are not always necessary, so be sure you’re actually saving lines of code and preventing unnecessary overrides when creating them. Good examples of modifiers are our theme color classes and size variants.

Beta 3 changes

While Beta 2 saw the bulk of our breaking changes during the beta phase, but we still have a few that needed to be addressed in the Beta 3 release. These changes apply if you’re updating to Beta 3 from Beta 2 or any older version of Bootstrap.

Miscellaneous

  • Removed the unused variable. We weren’t transitioning anything, so it was just extra code.
  • The npm package no longer includes any files other than our source and dist files; if you relied on them and were running our scripts via the folder, you should adapt your workflow.

Forms

  • Rewrote both custom and default checkboxes and radios. Now, both have matching HTML structure (outer with sibling and ) and the same layout styles (stacked default, inline with modifier class). This allows us to style the label based on the input’s state, simplifying support for the attribute (previously requiring a parent class) and better supporting our form validation.

    As part of this, we’ve changed the CSS for managing multiple s on custom form checkboxes and radios. Previously, the now removed element had the background color, gradient, and SVG icon. Customizing the background gradient meant replacing all of those every time you needed to change just one. Now, we have for the fill and gradient and handles the icon.

    To make a custom check inline, add .

  • Updated selector for input-based button groups. Instead of for style and behavior, we use the attribute just for JS behaviors and rely on a new class for styling.

  • Removed in favor of a slightly improved . This way and can be used on elements with ease.

  • Custom file inputs received a change to their Sass variable. It’s no longer a nested Sass map and now only powers one string—the button as that is now the only pseudo-element generated from our Sass. The text now comes from the .

Input groups

  • Input group addons are now specific to their placement relative to an input. We’ve dropped and for two new classes, and . You must explicitly use an append or a prepend now, simplifying much of our CSS. Within an append or prepend, place your buttons as they would exist anywhere else, but wrap text in .

  • Validation styles are now supported, as are multiple inputs (though you can only validate one input per group).


  • Sizing classes must be on the parent and not the individual form elements.

Table Search

importToolkitProvider,{Search}from'react-bootstrap-table2-toolkit';const{SearchBar}= Search;<ToolkitProvider    keyField="id"    data={ products }    columns={ columns }    search>{props=>(<div><h3>Input something at below input field<h3><SearchBar {...props.searchProps}><hr ><BootstrapTable{...props.baseProps}><div>)}<ToolkitProvider>
  1. You have to enable the search functionality via prop on .

  2. is a wrapper of react context, you are supposed to wrap the and as the child of

  3. You should render with as well. The position of is depends on you.

Custom the class on input element.

Custom the placeholder on input element.

Custom the style on input element.

milionsecond for debounce user input.

Customize the screen reader text for the search input. (Default: «Search this table»)

Accept a string that will be used for default searching when first time table render.

<ToolkitProvider  keyField="id"  data={ products }  columns={ columns }  search={{    defaultSearch'search something here'}}><ToolkitProvider>

Acccpt a function which will be called when table try to match every cells when search happening. This function accept an object like below example:

functiononColumnMatch({  searchText,  value,  column,  row}){}<ToolkitProvider  keyField="id"  data={ products }  columns={ columns }  search={{    onColumnMatch}}><ToolkitProvider>

If you want to search on the formatted data, you are supposed to enable this props. will check if you define the when doing search.

<ToolkitProvider  keyField="id"  data={ products }  columns={ columns }  search={{    searchFormattedtrue}}><ToolkitProvider>

After search done, this callback function will be called with newest result.

<ToolkitProvider  keyField="id"  data={ products }  columns={ columns }  search={{afterSearch(newResult)=>console.log(newResult)}}><ToolkitProvider>

We have a built-in clear search function which allow user clear search status via clicking button:

importToolkitProvider,{Search}from'react-bootstrap-table2-toolkit';const{SearchBar,ClearSearchButton}= Search;<ToolkitProvider  keyField="id"  data={ products }  columns={ columns }  search>{props=>(<div><SearchBar {...props.searchProps}><ClearSearchButton {...props.searchProps}>....<div>)}<ToolkitProvider>

Placement

Place toasts with custom CSS as you need them. The top right is often used for notifications, as is the top middle. If you’re only ever going to show one toast at a time, put the positioning styles right on the .

Bootstrap 11 mins ago × Hello, world! This is a toast message.

For systems that generate more notifications, consider using a wrapping element so they can easily stack.

Bootstrap just now × See? Just like this.

Bootstrap 2 seconds ago × Heads up, toasts will stack automatically

You can also get fancy with flexbox utilities to align toasts horizontally and/or vertically.

Bootstrap 11 mins ago × Hello, world! This is a toast message.

Quick start

Looking to quickly add Bootstrap to your project? Use BootstrapCDN, provided for free by the folks at StackPath. Using a package manager or need to download the source files? Head to the downloads page.

JS

Many of our components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js, and our own JavaScript plugins. Place the following s near the end of your pages, right before the closing tag, to enable them. jQuery must come first, then Popper.js, and then our JavaScript plugins.

We use jQuery’s slim build, but the full version is also supported.

Curious which components explicitly require jQuery, our JS, and Popper.js? Click the show components link below. If you’re at all unsure about the general page structure, keep reading for an example page template.

Our and include Popper, but not jQuery. For more information about what’s included in Bootstrap, please see our section.

Show components requiring JavaScript

  • Alerts for dismissing
  • Buttons for toggling states and checkbox/radio functionality
  • Carousel for all slide behaviors, controls, and indicators
  • Collapse for toggling visibility of content
  • Dropdowns for displaying and positioning (also requires Popper.js)
  • Modals for displaying, positioning, and scroll behavior
  • Navbar for extending our Collapse plugin to implement responsive behavior
  • Toasts for displaying and dismissing
  • Tooltips and popovers for displaying and positioning (also requires Popper.js)
  • Scrollspy for scroll behavior and navigation updates

Usage

npm install react-bootstrap-table --save

To use react-bootstrap-table in your react app, you should import it first. You can do this in two ways:

import{BootstrapTable,TableHeaderColumn}from'react-bootstrap-table';var ReactBSTable =require('react-bootstrap-table');var BootstrapTable =ReactBSTable.BootstrapTable;var TableHeaderColumn =ReactBSTable.TableHeaderColumn;

In the folder you have a UMD bundle with source maps () as well as a minified version ().

<scriptsrc="path/to/react-bootstrap-table/dist/react-bootstrap-table.min.js" /><script>var ReactBsTable =window.BootstrapTable;<script>
// source maps: https://npmcdn.com/react-bootstrap-table/dist/react-bootstrap-table.js.map<scriptsrc="https://npmcdn.com/react-bootstrap-table/dist/react-bootstrap-table.js"><script>// or use the min version<scriptsrc="https://npmcdn.com/react-bootstrap-table/dist/react-bootstrap-table.min.js"><script>

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

<linkrel="stylesheet"href="./dist/react-bootstrap-table-all.min.css">

The CSS files you can find in the css folder.

var products ={      id1,      name"Item name 1",      price100},{      id2,      name"Item name 2",      price100},........;functionpriceFormatter(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"));
$ git clone https://github.com/AllenFang/react-bootstrap-table.git$ cd react-bootstrap-table$ npm install$ gulp example-server 

Help this project to integrate a better examples demo, add travis & badge, code formatting, give a lot of suggestions and bugs report. Implement a lots of awesome new feature and also fix some bugs and enhancements. Contribute export csv, multi-search and bug fixing. Contribute a new colum-filter design and great feedback given. Bugs report and give some bootstrap and css suggestions actively. Contribute the edit format & validation on cell editing and row insertion. Improve the custom styling. Bug reports and fixing actively. Fixing bugs and give improvement for functionality. Bugs report and enhance the cell formatting. Implement the TableDataSet component.

Examples

Basic

To encourage extensible and predictable toasts, we recommend a header and body. Toast headers use , allowing easy alignment of content thanks to our margin and flexbox utilities.

Toasts are as flexible as you need and have very little required markup. At a minimum, we require a single element to contain your “toasted” content and strongly encourage a dismiss button.

Bootstrap 11 mins ago × Hello, world! This is a toast message.

Translucent

Toasts are slightly translucent, too, so they blend over whatever they might appear over. For browsers that support the CSS property, we’ll also attempt to blur the elements under a toast.

Bootstrap 11 mins ago × Hello, world! This is a toast message.

Stacking

When you have multiple toasts, we default to vertically stacking them in a readable manner.

Bootstrap just now × See? Just like this.

Bootstrap 2 seconds ago × Heads up, toasts will stack automatically

Accessibility

Toasts are intended to be small interruptions to your visitors or users, so to help those with screen readers and similar assistive technologies, you should wrap your toasts in an region. Changes to live regions (such as injecting/updating a toast component) are automatically announced by screen readers without needing to move the user’s focus or otherwise interrupt the user. Additionally, include to ensure that the entire toast is always announced as a single (atomic) unit, rather than announcing what was changed (which could lead to problems if you only update part of the toast’s content, or if displaying the same toast content at a later point in time). If the information needed is important for the process, e.g. for a list of errors in a form, then use the alert component instead of toast.


Note that the live region needs to be present in the markup before the toast is generated or updated. If you dynamically generate both at the same time and inject them into the page, they will generally not be announced by assistive technologies.

You also need to adapt the and level depending on the content. If it’s an important message like an error, use , otherwise use attributes.

As the content you’re displaying changes, be sure to update the to ensure people have enough time to read the toast.

When using , you must add a close button to allow users to dismiss the toast.

Bootstrap 11 mins ago × Hello, world! This is a toast message.

Rich Editors

have following predefined editor:

  • Text(Default)
  • Dropdown
  • Date
  • Textarea
  • Checkbox
import{Type}from'react-bootstrap-table2-editor';constcolumns=...,{    dataField'done',    text'Done',    editor{      typeType.SELECT|Type.TEXTAREA|Type.CHECKBOX|Type.DATE,...}}

In the following, we go though all the predefined editors:

Dropdown editor give a select menu to choose a data from a list. When use dropdown editor, either or should be required prop.

This is most simple case for assign the dropdown options data directly.

import{Type}from'react-bootstrap-table2-editor';constcolumns=...,{  dataField'type',  text'Job Type',  editor{    typeType.SELECT,    options{      value'A',      label'A'},{      value'B',      label'B'},{      value'C',      label'C'},{      value'D',      label'D'},{      value'E',      label'E'}}};

It is much flexible which accept a function and you can assign the dropdown options dynamically.

There are two case for :

  • Synchronous: Just return the options array in callback function
  • Asynchronous: Call function argument when you get the options from remote.
constcolumns=...,{  dataField'type',  text'Job Type',  editor{    typeType.SELECT,getOptions(setOptions,{ row, column })=>.....}};constcolumns=...,{  dataField'type',  text'Job Type',  editor{    typeType.SELECT,getOptions(setOptions,{ row, column })=>{setTimeout(()=>setOptions(...),1500);}}};

Date editor is use , the configuration is very simple:

constcolumns=...,{  dataField'inStockDate',  text'Stock Date',formatter(cell)=>{let dateObj = cell;if(typeof cell !=='object'){      dateObj =newDate(cell);}return`${(''+dateObj.getUTCDate()).slice(-2)}${(''+(dateObj.getUTCMonth()+1)).slice(-2)}${dateObj.getUTCFullYear()}`;},  editor{    typeType.DATE}};

Textarea editor is use , user can press to change line and in the , user allow to save result via press + .

constcolumns=...,{  dataField'comment',  text'Product Comments',  editor{    typeType.TEXTAREA}};

Checkbox editor allow you to have a pair value choice, the is required value to represent the actual value for check and uncheck.

constcolumns=...,{  dataField'comment',  text'Product Comments',  editor{    typeType.CHECKBOX,    value'Y:N'}};

Webpack / JSPM

importaccordionfrom'ui-bootstrap4/src/accordion';angular.module('myModule',accordion);

You can import all the pieces you need in the same way:

importaccordionfrom'ui-bootstrap4/src/accordion';importdatepickerfrom'ui-bootstrap4/src/datepicker';angular.module('myModule',accordion, datepicker);

This will load all the dependencies (if any) and also the templates (if any).

Be sure to have a loader able to process files like .

If you would prefer not to load your css through your JavaScript file loader/bundler, you can choose to import the file instead, which is available for the modules:

  • carousel
  • datepicker
  • datepickerPopup
  • dropdown
  • modal
  • popover
  • position
  • timepicker
  • tooltip
  • typeahead

The other modules, such as in the example below, do not have CSS resources to load, so you should continue to import them as normal:

importaccordionfrom'ui-bootstrap4/src/accordion';importtypeaheadfrom'ui-bootstrap4/src/typeahead/index-nocss.js';angular.module('myModule',accordion, typeahead);

Releasing

Note: you must have the environment variable set to a valid GitHub token with write access to your repo.

To create a release branch and changelog, run the following command, optionally with a semantic release type (major, minor, patch) (if not provided, it will default to semver (it’s best to let it default)):

./scripts/release <release-type>

Verify changelog in branch. Create a PR if everything looks good. Merge when tests are green.

Note: you must have write permission to this repo do perform this action

Once the release branch is merged, checkout master and run:

./scripts/publish

This will build the current state of master, tag it based on the release version and push the tag up to GitHub. Travis will detect the new tag and publish to npm.

OR

You can create a new tag via the GitHub user interface. If you do it this way, make sure to use the correct version as the tag name (eg. ).

Custom Filter

importfilterFactory,{customFilter}from'react-bootstrap-table2-filter';constcolumns=...,{  dataField'date',  text'Product Name',  filtercustomFilter(),filterRenderer(onFilter,column)=>.....};<BootstrapTable keyField='id' data={ products } columns={ columns } filter={filterFactory()}>

In custom filter case, you are suppose to finish following two steps:

  1. Call and pass to
  2. Give as a callback function and return your custom filter element.

This function will pass two argument to you:

  1. : call it to trigger filter when you need.
  2. : Just the column object!

In the end, please remember to return your custom filter element!

function just same as , etc, it is for customization reason. However, in the custom filter case, there’s only one props is valid:

importfilterFactory,{FILTER_TYPES}from'react-bootstrap-table2-filter';constcustomFilter=customFilter({  typeFILTER_TYPES.NUMBER,})

is a way to ask to filter you data as number, select, date or normal text.

Following properties is valid in :

  • TEXT
  • SELECT
  • NUMBER
  • DATE
  • MULTISELECT

Default filter is rendered inside the table column header, but you can choose to render them as a row by :

<BootstrapTable  keyField='id'  data={ products }  columns={ columns }  filter={filterFactory()}  filterPosition="top">
<BootstrapTable  keyField='id'  data={ products }  columns={ columns }  filter={filterFactory()}  filterPosition="bottom">

С этим читают