add story for custom selection column

packages/react-bootstrap-table2-example/examples/row-selection/custom-selection.js

@@ -0,0 +1,107 @@
+/* eslint react/prop-types: 0 */
+/* eslint no-param-reassign: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const selectRow1 = {
+ mode: 'radio',
+ clickToSelect: true,
+ selectionHeaderRenderer: () => 'X',
+ selectionRenderer: ({ mode, ...rest }) => (
+ <input type={ mode } { ...rest } />
+ )
+};
+
+const selectRow2 = {
+ mode: 'checkbox',
+ clickToSelect: true,
+ selectionHeaderRenderer: ({ indeterminate, ...rest }) => (
+ <input
+ type="checkbox"
+ ref={ (input) => {
+ if (input) input.indeterminate = indeterminate;
+ } }
+ { ...rest }
+ />
+ ),
+ selectionRenderer: ({ mode, ...rest }) => (
+ <input type={ mode } { ...rest } />
+ )
+};
+
+const sourceCode1 = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = ....;
+
+const selectRow = {
+ mode: 'radio',
+ clickToSelect: true,
+ selectionHeaderRenderer: () => 'X',
+ selectionRenderer: ({ mode, ...rest }) => (
+ <input type={ mode } { ...rest } />
+ )
+};
+
+<BootstrapTable
+ keyField='id'
+ data={ products }
+ columns={ columns }
+ selectRow={ selectRow }
+/>
+`;
+
+const sourceCode2 = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = ....;
+
+const selectRow = {
+ mode: 'checkbox',
+ clickToSelect: true,
+ selectionHeaderRenderer: ({ indeterminate, ...rest }) => (
+ <input
+ type="checkbox"
+ ref={ (input) => {
+ if (input) input.indeterminate = indeterminate;
+ } }
+ { ...rest }
+ />
+ ),
+ selectionRenderer: ({ mode, ...rest }) => (
+ <input type={ mode } { ...rest } />
+ )
+};
+
+<BootstrapTable
+ keyField='id'
+ data={ products }
+ columns={ columns }
+ selectRow={ selectRow }
+/>
+`;
+
+export default () => (
+ <div>
+ <BootstrapTable keyField="id" data={ products } columns={ columns } selectRow={ selectRow1 } />
+ <Code>{ sourceCode1 }</Code>
+ <BootstrapTable keyField="id" data={ products } columns={ columns } selectRow={ selectRow2 } />
+ <Code>{ sourceCode2 }</Code>
+ </div>
+);

packages/react-bootstrap-table2-example/stories/index.js

@@ -95,6 +95,7 @@ import ClickToSelectWithCellEditTable from 'examples/row-selection/click-to-sele
 import SelectionNoDataTable from 'examples/row-selection/selection-no-data';
 import SelectionStyleTable from 'examples/row-selection/selection-style';
 import SelectionClassTable from 'examples/row-selection/selection-class';
+import CustomSelectionTable from 'examples/row-selection/custom-selection';
 import NonSelectableRowsTable from 'examples/row-selection/non-selectable-rows';
 import SelectionBgColorTable from 'examples/row-selection/selection-bgcolor';
 import SelectionHooks from 'examples/row-selection/selection-hooks';
@@ -222,6 +223,7 @@ storiesOf('Row Selection', module)
  .add('Selection without Data', () => <SelectionNoDataTable />)
  .add('Selection Style', () => <SelectionStyleTable />)
  .add('Selection Class', () => <SelectionClassTable />)
+ .add('Custom Selection', () => <CustomSelectionTable />)
  .add('Selection Background Color', () => <SelectionBgColorTable />)
  .add('Not Selectabled Rows', () => <NonSelectableRowsTable />)
  .add('Selection Hooks', () => <SelectionHooks />)