fix #111

* implement selectRow.clickToSelect and selectRow.clickToEdit * add selectRow.clickToSelect and selectRow.clickToEdit stories * add clickToSelect to row selection examples for easier to select row * refine selectRow.nonSelectable * patch tests for selectRow.clickToSelect and selectRow.clickToEdit * patch docs for selectRow.clickToSelect and selectRow.clickToEdit
2026-08-16 13:40:17 +00:00 · 2017-10-26 01:35:09 -05:00
parent bbeb122af1
commit 985a1713ae
20 changed files with 588 additions and 103 deletions
@@ -0,0 +1,65 @@
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table2';
+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 selectRow = {
+  mode: 'checkbox',
+  clickToSelect: true,
+  clickToEdit: true
+};
+
+const cellEdit = {
+  mode: 'click'
+};
+
+const sourceCode = `\
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const selectRow = {
+  mode: 'checkbox',
+  clickToSelect: true,
+  clickToEdit: true  // Click to edit cell also
+};
+
+const cellEdit = {
+  mode: 'click'
+};
+
+<BootstrapTable
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  selectRow={ selectRow }
+/>
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } selectRow={ selectRow } cellEdit={ cellEdit } />
+    <Code>{ sourceCode }</Code>
+  </div>
+);
@@ -0,0 +1,55 @@
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table2';
+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 selectRow = {
+  mode: 'checkbox',
+  clickToSelect: true
+};
+
+const sourceCode = `\
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const selectRow = {
+  mode: 'checkbox',
+  clickToSelect: true
+};
+
+<BootstrapTable
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  selectRow={ selectRow }
+/>
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } selectRow={ selectRow } />
+    <Code>{ sourceCode }</Code>
+  </div>
+);
@@ -17,8 +17,9 @@ const columns = [{
  text: 'Product Price'
 }];

-const selectRowProp = {
-  mode: 'checkbox'
+const selectRow = {
+  mode: 'checkbox',
+  clickToSelect: true
 };

 const sourceCode = `\
@@ -33,21 +34,22 @@ const columns = [{
  text: 'Product Price'
 }];

-const selectRowProp = {
-  mode: 'checkbox'
+const selectRow = {
+  mode: 'checkbox',
+  clickToSelect: true
 };

 <BootstrapTable
  keyField='id'
  data={ products }
  columns={ columns }
-  selectRow={ selectRowProp }
+  selectRow={ selectRow }
 />
 `;

 export default () => (
  <div>
-    <BootstrapTable keyField="id" data={ products } columns={ columns } selectRow={ selectRowProp } />
+    <BootstrapTable keyField="id" data={ products } columns={ columns } selectRow={ selectRow } />
    <Code>{ sourceCode }</Code>
  </div>
 );
@@ -19,6 +19,7 @@ const columns = [{

 const selectRow = {
  mode: 'checkbox',
+  clickToSelect: true,
  nonSelectable: [0, 2, 4]
 };

@@ -36,6 +37,7 @@ const columns = [{

 const selectRow = {
  mode: 'checkbox',
+  clickToSelect: true,
  nonSelectable: [0, 2, 4]
 };

@@ -20,11 +20,13 @@ const columns = [{

 const selectRow1 = {
  mode: 'checkbox',
+  clickToSelect: true,
  bgColor: '#00BFFF'
 };

 const selectRow2 = {
  mode: 'checkbox',
+  clickToSelect: true,
  bgColor: (row, rowIndex) => (rowIndex > 1 ? '#00BFFF' : '#00FFFF')
 };

@@ -42,6 +44,7 @@ const columns = [{

 const selectRow = {
  mode: 'checkbox',
+  clickToSelect: true,
  bgColor: '#00BFFF'
 };

@@ -67,6 +70,7 @@ const columns = [{

 const selectRow = {
  mode: 'checkbox',
+  clickToSelect: true,
  bgColor: (row, rowIndex) => (rowIndex > 1 ? '#00BFFF' : '#00FFFF')
 };

@@ -20,11 +20,13 @@ const columns = [{

 const selectRow1 = {
  mode: 'checkbox',
+  clickToSelect: true,
  classes: 'selection-row'
 };

 const selectRow2 = {
  mode: 'checkbox',
+  clickToSelect: true,
  classes: (row, rowIndex) =>
    (rowIndex > 1 ? 'row-index-bigger-than-2101' : 'row-index-small-than-2101')
 };
@@ -43,6 +45,7 @@ const columns = [{

 const selectRow = {
  mode: 'checkbox',
+  clickToSelect: true,
  classes: 'selection-row'
 };

@@ -68,6 +71,7 @@ const columns = [{

 const selectRow = {
  mode: 'checkbox',
+  clickToSelect: true,
  classes: (row, rowIndex) =>
    (rowIndex > 1 ? 'row-index-bigger-than-2101' : 'row-index-small-than-2101')
 };
@@ -20,11 +20,13 @@ const columns = [{

 const selectRow1 = {
  mode: 'checkbox',
+  clickToSelect: true,
  style: { backgroundColor: '#c8e6c9' }
 };

 const selectRow2 = {
  mode: 'checkbox',
+  clickToSelect: true,
  style: (row, rowIndex) => {
    const backgroundColor = rowIndex > 1 ? '#00BFFF' : '#00FFFF';
    return { backgroundColor };
@@ -45,6 +47,7 @@ const columns = [{

 const selectRow = {
  mode: 'checkbox',
+  clickToSelect: true,
  style: { backgroundColor: '#c8e6c9' }
 };

@@ -70,6 +73,7 @@ const columns = [{

 const selectRow = {
  mode: 'checkbox',
+  clickToSelect: true,
  style: (row, rowIndex) => {
    const backgroundColor = rowIndex > 1 ? '#00BFFF' : '#00FFFF';
    return { backgroundColor };
@@ -17,8 +17,9 @@ const columns = [{
  text: 'Product Price'
 }];

-const selectRowProp = {
-  mode: 'radio'
+const selectRow = {
+  mode: 'radio',
+  clickToSelect: true
 };

 const sourceCode = `\
@@ -33,21 +34,22 @@ const columns = [{
  text: 'Product Price'
 }];

-const selectRowProp = {
-  mode: 'radio'
+const selectRow = {
+  mode: 'radio',
+  clickToSelect: true
 };

 <BootstrapTable
  keyField='id'
  data={ products }
  columns={ columns }
-  selectRow={ selectRowProp }
+  selectRow={ selectRow }
 />
 `;

 export default () => (
  <div>
-    <BootstrapTable keyField="id" data={ products } columns={ columns } selectRow={ selectRowProp } />
+    <BootstrapTable keyField="id" data={ products } columns={ columns } selectRow={ selectRow } />
    <Code>{ sourceCode }</Code>
  </div>
 );
@@ -53,6 +53,8 @@ import CellEditWithRedux from 'examples/cell-edit/cell-edit-with-redux-table';
 // work on row selection
 import SingleSelectionTable from 'examples/row-selection/single-selection';
 import MultipleSelectionTable from 'examples/row-selection/multiple-selection';
+import ClickToSelectTable from 'examples/row-selection/click-to-select';
+import ClickToSelectWithCellEditTable from 'examples/row-selection/click-to-select-with-cell-edit';
 import SelectionStyleTable from 'examples/row-selection/selection-style';
 import SelectionClassTable from 'examples/row-selection/selection-class';
 import NonSelectableRowsTable from 'examples/row-selection/non-selectable-rows';
@@ -119,6 +121,8 @@ storiesOf('Cell Editing', module)
 storiesOf('Row Selection', module)
  .add('Single Selection', () => <SingleSelectionTable />)
  .add('Multiple Selection', () => <MultipleSelectionTable />)
+  .add('Click to Select', () => <ClickToSelectTable />)
+  .add('Click to Select and Edit Cell', () => <ClickToSelectWithCellEditTable />)
  .add('Selection Style', () => <SelectionStyleTable />)
  .add('Selection Class', () => <SelectionClassTable />)
  .add('Selection Background Color', () => <SelectionBgColorTable />)