How to extract table as an indipendente component

I used a lot (about 10 times ) tables in my project, they all have common options like ` exportCSV search clearSearch` ecc. It makes sense to create a common components (tags) to centralize the `BootstrapTable` and `TableHeaderColumn` tag.

I want the following code

ID

become

ID

Is it possible? (I tried, but got `Uncaught (in promise) TypeError: Cannot read property 'reduce' of undefined at BootstrapTable.initTable ` error)

PS: I thought about to centralize the table as a component by pass all the column data,
like

but I think

ID

is a better solution.

My solution is create a TableColumn component, like this:

```
import React from 'react';
import PropTypes from 'prop-types';
import { TableHeaderColumn } from 'react-bootstrap-table';
import 'react-bootstrap-table/dist/react-bootstrap-table.min.css';

export default class TableColumn extends React.Component {

static propTypes = {
dataField: PropTypes.string,
children: PropTypes.any,
dataFormat: PropTypes.any,
isKey: PropTypes.bool,
hidden: PropTypes.bool,
isExport: PropTypes.bool,
};

render() {
const { dataField, dataFormat, isKey, hidden, isExport, children } = this.props;

console.log('Table column props:', this.props);
return (

{children}

);
}

}

```

Invoke it by
```

ID
title
service type
start date
end date
Action

```

But sort and search not works anymore, got `TableHeaderColumn.js:111 Uncaught TypeError: this.props.onSort is not a function` error.

Could someone give me some suggestions? Thanks a lot!