react-bootstrap-table2/docs/columns.md

Definition of columns props on BootstrapTable

Available properties in a column object:

Required

• dataField (required)
• text (required)

Optional

• hidden
• formatter
• formatExtraData
• sort
• sortFunc
• classes
• style
• title
• events
• align
• attrs
• headerFormatter
• headerClasses
• headerStyle
• headerTitle
• headerEvents
• headerAlign
• headerAttrs
• editable
• validator

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.sort - [Bool]

Enable the column sort via a true value given.

column.sortFunc - [Function]

column.sortFunc only work when column.sort is enable. sortFunc allow you to define your sorting algorithm. This callback function accept four arguments:

{
  // omit...
  sort: true,
  sortFunc: (a, b, order, dataField) => {
    if (order === 'asc') return a - b;
    else return b - a;
  }
}

The possible value of order argument is asc and desc.

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 4 arguments and a string is expect to return:

{
  classes: function callback(cell, row, rowIndex, colIndex) { ... }
}

Parameters

• cell: The value of current cell.
• row: The value of row being processed in the BootstrapTable.
• rowIndex: The index of the current row being processed in the BootstrapTable.
• colIndex: The index of the current column being processed in BootstrapTable.

Return value

A new String will be the result of element class.

column.headerClasses - [String | Function]

It's similar to column.classes, headerClasses is availabe to have customized class on table header column:

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

Furthermore, it also accept a callback function which takes 2 arguments and a String is expect to return:

{
  headerClasses: function callback(column, colIndex) { ... }
}

Parameters

• column: The value of current column.
• colIndex: The index of the current column being processed in BootstrapTable.

Return value

A new String will be the result of element headerClasses.

column.style - [Object | Function]

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

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

In addition, similar to column.classes, style also accept a callback function which have more power to customize the inline style on each columns. This callback function takes 4 arguments and an Object is expect to return:

{
  style: function callback(cell, row, rowIndex, colIndex) { ... }
}

Parameters

• cell: The value of current cell.
• row: The value of row being processed in the BootstrapTable.
• rowIndex: The index of the current row being processed in the BootstrapTable.
• colIndex: The index of the current column being processed in BootstrapTable.

Return value

A new Object will be the result of element style.

column.headerStyle - [Object | Function]

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

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

Moreover, it also accept a callback function which takes 2 arguments and an Object is expect to return:

{
  headerStyle: function callback(column, colIndex) { ... }
}

Parameters

• column: The value of current column.
• colIndex: The index of the current column being processed in BootstrapTable.

Return value

A new Object will be the result of element headerStyle.

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 and take cell content as default value. Additionally, you could customize title via a callback. It takes 4 arguments and a String is expect to return:

{
  // omit...
  title: function callback(cell, row, rowIndex, colIndex) { ... }
  // return custom title here
}

Parameters

• cell: The value of current cell.
• row: The value of row being processed in the BootstrapTable.
• rowIndex: The index of the current row being processed in the BootstrapTable.
• colIndex: The index of the current column being processed in BootstrapTable.

Return value

A new String will be the result of element title.

column.headerTitle - [Bool | Function]

headerTitle is only for the title on header column, default is disable. The usage almost same as column.title,

{
  // omit...
  headerTitle: true
}

It's also availabe to custom via a callback function:

{
  headerTitle: function callback(column, colIndex) { ... }
}

Parameters

• column: The value of current column.
• colIndex: The index of the current column being processed in BootstrapTable.

Return value

A new String will be the result of element headerTitle.

column.align - [String | Function]

You can configure the CSS text-align for table column by align property.

Besides, align also accept a callback function for dynamically setting text align. It takes 4 arguments and a String is expect to return:

{
  // omit...
  align: function callback(cell, row, rowIndex, colIndex) { ... }
}

Parameters

• cell: The value of current cell.
• row: The value of row being processed in the BootstrapTable.
• rowIndex: The index of the current row being processed in the BootstrapTable.
• colIndex: The index of the current column being processed in BootstrapTable.

Return value

A new String will be the result of element text alignment.

column.headerAlign - [String | Function]

It's almost same as column.align, but it's for the CSS text-align on header column.

{
  // omit...
  headerAlign: 'center'
}

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
  }
}

Parameters

• column: The value of current column.
• colIndex: The index of the current column being processed in BootstrapTable.

Return value

A new String will be the result of element headerAlign.

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.

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

column.attrs - [Object | Function]

Via attrs property, You can customize table column HTML attribute which allow user to configure the elements or adjust their behavior.

{
  // omit...
  attrs: {
    title: 'bar',
    'data-test': 'foo'
  }
}

Not only Object, callback function is also acceptable. It takes 4 arguments and an Object is expect to return:

{
  attrs: function callback(cell, row, rowIndex, colIndex) { ... }
}

Parameters

• cell: The value of current cell.
• row: The value of row being processed in the BootstrapTable.
• rowIndex: The index of the current row being processed in the BootstrapTable.
• colIndex: The index of the current column being processed in BootstrapTable.

Return value

A new Object will be the result of element HTML attributes.

* Caution

If column.classes, column.style, column.title, column.hidden or column.align was given at the same time, property attrs has lower priorty and it will be overwrited.

{
  // omit...
  title: true, // it will be chosen.
  attrs: { title: 'test' }
}

column.headerAttrs - [Object | Function]

headerAttrs is similiar to column.attrs but it works for header column.

{
  // omit...
  headerAttrs: {
    title: 'bar',
    'data-test': 'foo'
  }
}

Additionally, customize the header attributes by a 2-arguments callback function:

{
  // omit...
  headerAttrs: (column, colIndex) => ({
    // return customized HTML attribute here
  })
}

Parameters

• column: The value of current column.
• colIndex: The index of the current column being processed in BootstrapTable.

Return value

A new Object will be the result of element headerAttrs.

Caution:
Same as column.attrs, it has lower priority and will be overwrited when other props related to HTML attributes were given.

column.editable - [Bool | Function]

column.editable default is true, means every column is editable if you configure cellEdit. But you can disable some columns editable via setting false.

If a callback function given, you can control the editable level as cell level:

{
  // omit...
  editable: (cell, row, rowIndex, colIndex) => {
    // return true or false;
  }
}

column.validator - [Function]

column.validator used for validate the data when cell on updating. it's should accept a callback function with following argument: newValue, row and column:

{
  // omit...
  validator: (newValue, row, column) => {
    return ...;
  }
}

The return value can be a bool or an object. If your valiation is pass, return true explicitly. If your valiation is invalid, return following object instead:

{
  valid: false,
  message: 'SOME_REASON_HERE'
}