mirror of
https://github.com/gosticks/react-bootstrap-table2.git
synced 2025-10-16 11:55:39 +00:00
41 lines
2.3 KiB
Markdown
41 lines
2.3 KiB
Markdown
---
|
|
id: basic-column
|
|
title: Work on Column
|
|
sidebar_label: Work on Column
|
|
---
|
|
|
|
Firstly, legacy `react-bootstrap-table` is hard to customize the DOM Event, Attributes on column or header column. In the `react-bootstrap-table2`, we make those bad design become more easy and flexible.
|
|
|
|
**[Live Demo For Column](../storybook/index.html?selectedKind=Work%20on%20Columns)**
|
|
**[Live Demo For Header Column](../storybook/index.html?selectedKind=Work%20on%20Header%20Columns)**
|
|
**[API & Props Definition](./column-props.html)**
|
|
|
|
-----
|
|
|
|
## Formatting Table Column
|
|
|
|
[`column.formatter`](./column-props.html#columnformatter-function) is a good chance for you to customize the cell. If you just want to add some styling, attributes or DOM event linstener, `react-bootstrap-table2` have respective props to handle:
|
|
|
|
* [`column.style`](./column-props.html#columnstyle-object-function)
|
|
* [`column.classes`](./column-props.html#columnclasses-string-function)
|
|
* [`column.events`](./column-props.html#columnevents-object)
|
|
* [`column.attrs`](./column-props.html#columnattrs-object-function)
|
|
|
|
In addition, we also give some useful props to let you have a quickly configuration:
|
|
|
|
* [`column.hidden`](./column-props.html#columnhidden-bool)
|
|
* [`column.title`](./column-props.html#columntitle-bool-function)
|
|
* [`column.align`](./column-props.html#columnalign-string-function)
|
|
* *Welcome to submit a PR or issue for asking a convinence props for column :)*
|
|
|
|
## Formatting Table Header
|
|
Formatting header column is almost same as column formatting, we got [`column.headerFormatter`](./column-props.html#columnheaderformatter-function) to let you customize the content of a header column. Default `react-bootstrap-table2` will take [`column.text`](./column-props.html#columntext-required-string) as the content of header column.
|
|
|
|
Following, we list some useful props for customization:
|
|
|
|
* [`column.headerStyle`](./column-props.html#columnheaderstyle-object-function)
|
|
* [`column.headerClasses`](./column-props.html#columnheaderclasses-string-function)
|
|
* [`column.headerEvents`](./column-props.html#columnheaderevents-object)
|
|
* [`column.headerAttrs`](./column-props.html#columnheaderattrs-object-function)
|
|
* [`column.headerTitle`](./column-props.html#columnheadertitle-bool-function)
|
|
* [`column.headerAlign`](./column-props.html#columnheaderalign-string-function) |