react-bootstrap-table2/docs/columns.md

Definition of columns props on BootstrapTable

Available properties in a column object:

• dataField (required)
• text (required)
• hidden
• formatter
• headerFormatter
• formatExtraData
• classes
• style
• title
• events
• align
• headerTitle
• headerEvents
• headerAlign
• headerClasses
• headerStyle

Following is a most simplest and basic usage:

const rows = [ { id: 1, name: '...', price: '102' } ];
const columns = [ {
    dataField: id, 
    text: Production ID
  }, {
    dataField: name,
    text: Production Name
  }, {
    dataField: price,
    text: Production Price
  }
];

Let's introduce the definition of column object

column.dataField (required) - [String]

Use dataField to specify what field should be apply on this column. If your raw data is nested, for example:

const row = {
  id: 'A001',
  address: {
    postal: '1234-12335',
    city: 'Chicago'
  }
}

You can use dataField with dot(.) to describe nested object:

dataField: 'address.postal'
dataField: 'address.city'

column.text (required) - [String]

text will be apply as the column text in header column, if your header is not only text and you want to customize your header column, please check column.headerFormatter

column.hidden - [Bool]

hidden allow you to hide column when true given.

column.formatter - [Function]

formatter allow you to customize the table column and only accept a callback function which take four arguments and a JSX/String are expected for return.

• cell
• row
• rowIndex
• formatExtraData

column.headerFormatter - [Function]

headerFormatter allow you to customize the header column and only accept a callback function which take two arguments and a JSX/String are expected for return.

• column: column object itself
• colIndex

column.formatExtraData - [Any]

It's only used for column.formatter, you can define any value for it and will be passed as fourth argument for column.formatter callback function.

column.classes - [String | Function]

It's availabe to have custom class on table column:

{
  // omit...
  classes: 'id-custom-cell'
}

In addition, classes also accept a callback function which have more power to custom the css class on each columns. This callback function take three arguments and a string is expect to return:

• cell
• row
• colIndex

column.headerClasses - [String | Function]

It's availabe to have customized class on table header column:

{
  // omit...
  headerClasses: 'id-custom-cell'
}

In addition, similar to column.classes, headerClasses also accept a callback function which have more power to custom the css class on header column. This callback function take two arguments and a string is expect to return:

• column
• colIndex

column.style - [Object | Function]

It's availabe to have custom class on table column:

{
  // omit...
  style: { backgroundColor: 'green' }
}

style like column.classes, it accept a callback function too and have same arguments: cell, row and colIndex.

column.headerStyle - [Object | Function]

It's availabe to have customized inline-style on table header column:

{
  // omit...
  headerStyle: { backgroundColor: 'green' }
}

headerStyle like column.headerClasses, it accept a callback function as well and have same arguments: column and colIndex.

column.title - [Bool | Function]

react-bootstrap-table2 is disable HTML title as default. You can assign title as true to enable the HTML title on table column. In addition, you can custom the title via a callback function:

{
  // omit...
  title: (cell, row, colIndex) => {
    // return custom title here
  }
}

column.headerTitle - [Bool | Function]

headerTitle is only for the title on header column, default is disable. The usage almost same as column.title, it's also availabe to custom via a callback function:

{
  // omit...
  headerTitle: (column, colIndex) => {
    // column is an object and perform itself
    // return custom title here
  }
}

column.align - [String | Function]

You can configure the CSS text-align for table column by align property. However, align also accept a callback function for customizable reason and this function take fore arguments:

• cell
• row
• colIndex

column.headerAlign - [String | Function]

It's almost same as column.align, but it's for the CSS text-align on header column. Also, you can custom the align by a callback function:

{
  // omit...
  headerAlign: (column, colIndex) => {
    // column is an object and perform itself
    // return custom title here
  }
}

column.events - [Object]

You can assign any HTML Event on table column via event property:

{
  // omit...
  events: {
    onClick: e => { ... }
  }
}

column.headerEvents - [Object]

headerEvents same as column.events but this is for header column.