Skip to main content

BootstrapTable Props

Required​

Optional​

keyField(required) - [String]​

Tells react-bootstrap-table-ng which column of the data is unique. This should be the name of a property that is unique for each item in your dataset

data(required) - [Array]​

Provides data for your table. It accepts a single Array object.

Each item in this array is an object that represents a row in the table. Each "Row" object should have a key-value pair for each column in the table, whose key matches that column's dataField value.

For example, if your column definitions look like:

columns = [
  { dataField: "id", text: "Id" },
  { dataField: "name", text: "Name" },
  { dataField: "animal", text: "Animal" },
];

Then your data might look like:

data = [
  { id: 1, name: 'George', animal: 'Monkey' }
  { id: 2, name: 'Jeffrey', animal: 'Giraffe' }
  { id: 3, name: 'Alice', animal: 'Giraffe' }
  { id: 4, name: 'Alice', animal: 'Tiger' }
]

And your "keyField" would be id

columns(required) - [Object]​

Accepts a single Array object, please see columns definition for more detail.

remote - [Bool | Object]​

Default is false, if enable remote, you are supposed to be handle all the table change events, like: pagination, insert, filtering etc. This is a chance that you can connect to your remote server or database to manipulate your data.
For flexibility reason, you can control what functionality should be handled on remote via a object return:

remote={ {
  filter: true,
  pagination: false,
  sort: false,
  cellEdit: false
} }

In above case, only column filter will be handled on remote because we enable it by giving true.

Note: when remote is enable, you are suppose to give onTableChange prop on BootstrapTable It's the only way to communicate to your remote server and update table states.

A special case for remote pagination:

remote={ { pagination: true, filter: false, sort: false } }

There is a special case for remote pagination, even you only specified the pagination need to handle as remote, react-bootstrap-table-ng will handle all the table changes(filter, sort etc) as remote mode, because react-bootstrap-table-ng only know the data of current page, but filtering, searching or sort need to work on overall data.

bootstrap4 - [Bool]​

true to indicate your bootstrap version is 4. Default version is 3.

bootstrap5 - [Bool]​

true to indicate your bootstrap version is 5. Default version is 3.

noDataIndication - [Function]​

noDataIndication should be a callback function which return anything that will be showed in the table when data is empty.

loading - [Bool]​

Telling if table is loading or not, for example: waiting data loading, filtering etc. It's only valid when remote is enabled. When loading is true, react-bootstrap-table-ng will attend to render a overlay on table via overlay prop, if overlay prop is not given, react-bootstrap-table-ng will ignore the overlay rendering.

overlay - [Function]​

overlay accept a factory function which should returning a higher order component. By default, react-bootstrap-table-ng-overlay can be a good option for you:

$ npm install react-bootstrap-table-ng-overlay
import overlayFactory from "react-bootstrap-table-ng-overlay";

<BootstrapTable
  data={data}
  columns={columns}
  loading={true} //only loading is true, react-bootstrap-table will render overlay
  overlay={overlayFactory()}
/>;

Actually, react-bootstrap-table-ng-overlay is depends on react-loading-overlay and overlayFactory just a factory function and you can pass any props which available for react-loading-overlay:

overlay={ overlayFactory({ spinner: true, background: 'rgba(192,192,192,0.3)' }) }

caption - [String | Node]​

Same as HTML caption tag, you can set it as String or a React JSX.

striped - [Bool]​

Same as bootstrap .table-striped class for adding zebra-stripes to a table.

bordered - [Bool]​

Same as bootstrap .table-bordered class for adding borders to a table and table cells.

hover - [Bool]​

Same as bootstrap .table-hover class for adding mouse hover effect (grey background color) on table rows.

condensed - [Bool]​

Same as bootstrap .table-condensed class for making a table more compact by cutting cell padding in half.

id - [String]​

Customize id on table element.

rowIdPrefix - [String | Function]​

Customize the id attribute on each row (tr). This is useful for integration with external libraries (e.g., drag-and-drop or analytics) that require stable DOM IDs.

Using a string prefix​

If a string is provided, each row ID will be ${rowIdPrefix}-${rowKey} (where rowKey is the value of the keyField).

<BootstrapTable
  keyField="id"
  data={data}
  columns={columns}
  rowIdPrefix="custom-prefix"
/>
// Renders <tr id="custom-prefix-1">...

Using a generator function​

For full control, provide a function that receives the row data and its index.

<BootstrapTable
  keyField="id"
  data={data}
  columns={columns}
  rowIdPrefix={(row, index) => `row-${index}-${row.name}`}
/>

Expansion Rows​

Expansion rows also receive a stable ID based on the parent row ID: ${parentRowId}-expansion.

Default behavior​

If not provided, the default ID for each row is ${tableId}-row-${rowKey}.

tabIndexCell - [Bool]​

Enable the tabIndex attribute on <td> element.

classes - [String]​

Customize class on table element.

wrapperClasses - [String]​

Customize class on the outer element which wrap up the table element.

columnResize - [Bool]​

Enable table columns resizable for all columns with resizable attribute not set to false.

headerClasses - [String]​

Customize class on the header row(tr).

headerWrapperClasses - [String]​

Customize class on thead.

bodyClasses - [String]​

Customize class on tbody.

cellEdit - [Object]​

Makes table cells editable, please see cellEdit definition for more detail.

cellExpandable - [Bool]​

Default is true. When enabled, react-bootstrap-table-ng adds the expandable-cell CSS class to every <td> element in the table body. This class is intended to be used with truncated cell content — you can use it to show the full content on hover via CSS (e.g. max-width + overflow: hidden + text-overflow: ellipsis with a hover expansion effect).

Set to false to disable the expandable-cell class for all columns at the table level:

<BootstrapTable
  keyField="id"
  data={products}
  columns={columns}
  cellExpandable={false}
/>

Note: The column-level cellExpandable property (defined on a column definition object) takes precedence over this table-level prop. If a column sets cellExpandable: true, that column's cells will receive the class even when the table-level prop is false, and vice versa.

const columns = [
  { dataField: "id", text: "Product ID" },
  { dataField: "name", text: "Product Name" },
  {
    dataField: "price",
    text: "Product Price",
    cellExpandable: false, // overrides the table-level cellExpandable
  },
];

// Table-level cellExpandable defaults to true, but the 'price' column opts out.
<BootstrapTable keyField="id" data={products} columns={columns} />;

selectRow - [Object]​

Makes table rows selectable, please see selectRow definition for more detail.

rowStyle - [Object | Function]​

Custom the style of table rows:

```js
<BootstrapTable data={ data } columns={ columns } rowStyle={ { backgroundColor: 'red' } } />

This prop also accept a callback function for flexible to custom row style:

const rowStyle = (row, rowIndex) => {
  return { ... };
};

```js
<BootstrapTable data={ data } columns={ columns } rowStyle={ rowStyle } />

rowClasses - [String | Function]​

Custom the style of table rows:

<BootstrapTable data={data} columns={columns} rowClasses="custom-row-class" />

This prop also accept a callback function for flexible to custom row style:

const rowClasses = (row, rowIndex) => {
  return "custom-row-class";
};

<BootstrapTable data={data} columns={columns} rowClasses={rowClasses} />;

rowEvents - [Object]​

Custom the events on row:

const rowEvents = {
  onClick: (e, row, rowIndex) => {
    ....
  }
};

<BootstrapTable data={ data } columns={ columns } rowEvents={ rowEvents } />

hiddenRows - [Array]​

Hide rows, this props accept an array of row keys:

const hiddenRows = [1, 4];

<BootstrapTable data={data} columns={columns} hiddenRows={hiddenRows} />;

sort - [Object]​

Two cases you probably need to configure sort prop:

Manage sorting state​

You can give dataField and order to specify the sorting state in table, For example

<BootstrapTable sort={ { dataField: 'price', order: 'asc' } }>

One-time sorting configuration​

In earily version, we only can configure sortCaret and sortFunc per column. But they are same in most of cases.
So here we give you a chance to just setup these props in one time.

<BootstrapTable sort={ {
  sortCaret: ...
  sortFunc: ...
} }>

defaultSorted - [Array]​

defaultSorted accept an object array which allow you to define the default sort columns when first render.

const defaultSorted = [
  {
    dataField: "name", // if dataField is not match to any column you defined, it will be ignored.
    order: "desc", // desc or asc
  },
];

defaultSortDirection - [String]​

Default sort direction when user click on header column at first time, available value is asc and desc. Default is desc.

pagination - [Object]​

pagination allow user to render a pagination panel on the bottom of table. But pagination functionality is separated from core of react-bootstrap-table-ng so that you are suppose to install react-bootstrap-table-ng-paginator additionally.

$ npm install react-bootstrap-table-ng-paginator --save

After installation of react-bootstrap-table-ng-paginator, you can enable pagination on react-bootstrap-table-ng easily:

import paginationFactory from "react-bootstrap-table-ng-paginator";

// omit...

<BootstrapTable
  data={data}
  columns={columns}
  pagination={paginationFactory()}
/>;

paginationFactory is a function actually and allow to pass some pagination options, following we list all the available options:

paginationFactory({
  page, // Specify the current page. It's necessary when remote is enabled
  sizePerPage, // Specify the size per page. It's necessary when remote is enabled
  totalSize, // Total data size. It's necessary when remote is enabled
  pageStartIndex: 0, // first page will be 0, default is 1
  paginationSize: 3,  // the pagination bar size, default is 5
  showTotal: true, // display pagination information
  showPageJump: true, // display page jump input
  sizePerPageList: [ {
    text: '5', value: 5
  }, {
    text: '10', value: 10
  }, {
    text: 'All', value: products.length
  } ], // A numeric array is also available: [5, 10]. the purpose of above example is custom the text
  withFirstAndLast: false, // hide the going to first and last page button
  alwaysShowAllBtns: true, // always show the next and previous page button
  firstPageText: 'First', // the text of first page button
  prePageText: 'Prev', // the text of previous page button
  nextPageText: 'Next', // the text of next page button
  lastPageText: 'Last', // the text of last page button
  nextPageTitle: 'Go to next', // the title of next page button
  prePageTitle: 'Go to previous', // the title of previous page button
  firstPageTitle: 'Go to first', // the title of first page button
  lastPageTitle: 'Go to last', // the title of last page button
  hideSizePerPage: true, // hide the size per page dropdown
  hidePageListOnlyOnePage: true, // hide pagination bar when only one page, default is false
  onPageChange: (page, sizePerPage) => {}, // callback function when page was changing
  onSizePerPageChange: (sizePerPage, page) => {}, // callback function when page size was changing
  paginationTotalRenderer: (from, to, size) => { ... }  // custom the pagination total
})

filter - [Object]​

filter allows users to filter data by columns. For more information, please navigate to filter-props.

Getting Started

$ npm install react-bootstrap-table-ng-filter --save

After installing react-bootstrap-table-ng-filter, you could easily enable the functionality of filter.

Example

import BootstrapTable from "react-bootstrap-table-next";
import filterFactory, { textFilter } from "react-bootstrap-table-ng-filter";

const columns = [
  {
    dataField: "id",
    text: "Product ID",
  },
  {
    dataField: "name",
    text: "Product Name",
  },
  {
    dataField: "price",
    text: "Product Price",
    filter: textFilter(), // apply text filter
  },
];

<BootstrapTable
  keyField="id"
  data={products}
  columns={columns}
  filter={filterFactory()}
/>;

filterPosition - [String]​

Available value is inline, top and bottom, default is inline. This prop decide where react-bootstrap-table render column filter.

onTableChange - [Function]​

This callback function will be called when remote enabled only.

const onTableChange = (type, newState) => {
  // handle any data change here
};
<BootstrapTable data={data} columns={columns} onTableChange={onTableChange} />;

There's only two arguments will be passed to onTableChange: type and newState:

type is tell you what kind of functionality to trigger this table's change: available values at the below:

  • filter
  • pagination
  • sort
  • cellEdit

Following is a all available properties in newState object:

{
  page,  // newest page
  sizePerPage,  // newest sizePerPage
  sortField,  // newest sort field
  sortOrder,  // newest sort order
  filters, // an object which have current filter status per column
  data, // when you enable remote sort, you may need to base on data to sort if data is filtered/searched
  cellEdit: {  // You can only see this prop when type is cellEdit
    rowId,
    dataField,
    newValue
  }
}

onDataSizeChange - [Function]​

This callback function will be called only when data size change by search/filter etc. This function have one argument which is an object contains below props:

  • dataSize: The new data size
handleDataChange = ({ dataSize }) => {
  this.setState({ rowCount: dataSize });
}

<BootstrapTable
  onDataSizeChange={ handleDataChange }
  ....
/>