877259158e
* implement row single and multiple selection * radio button for single, checkbox for multiple * update component if status was changing * implement header cell for row selection * render checkbox for multiple, nothing for single * default css for th[data-th-row-selection] * update component if status was changing * transform cursor to pointer when hover button radio and checkbox * story for single and multiple rows selection * remove props required field and turn off eslint * [test] adapt with other component * props resolver for cell selection * if row selection was disabled, return mode 'ROW_SELECT_DISABLED' * refactor row selection cell * rename to selection-cell * remove unnecessary props * better coding style * props resolver for header cell selection * refactor row selection for header cell * rename to selection-header-cell * remove unnecessary props * better coding style * new logic for handleSelectAllRows * tunning for multi selection logic * allow user to customize select all result * remove cursor point * remove uncessary utils * tunning for function naming * mock data for resolved props including both body and header * judge cell-editable and row-selectable with mode * [test] unit test for props-resolver * move position of test case of cellEdit * add test for resolveCellSelectionProps * add test for resolveHeaderCellSelectionProps * accept row keys for mock-component * [test] add test for body * [test] add test for header * [test] add test for row * [test] add test for selection-cell * fix typo * [test] add test for selection-header-cell * add test for checkbox in selection-header-cell * [test] add test for bootstrap-table * test for handleRowSelect * test for handleAllRowsSelect * remove uncessary prop * remove unnecessary dafault mode for selectRow * add description for props shape * remove uncessary declaration of inputType * add isRequred for selectRow.mode * [test] verify the correctness of params when clicking on selection cell * [test] modification for test wording and unmatched data type * handle logic of row selection inside the store * ignore the situation of pagination * correct the tests * [test] add test for store/base.js * Document for row selection * modication for defects * simplify proptypes to basic data type * row selection document in README * refactor all function test with sinon * refactor all mock function to sinon.stub() instead jest.fn() * fix conflict
3.2 KiB
Documents
Props on BootstrapTable
Required
Optional
keyField(required) - [String]
keyField is a prop to tell react-bootstrap-table2 which column is unigue key.
data(required) - [Array]
Assign your table data via data prop. It only accept an Array object.
columns(required) - [Object]
columns props accept an Array object, please see columns definition for more detail.
caption - [String | Node]
Same as caption tag in HTML. You can give a String or a React JSX.
striped - [Bool]
Same as .table-striped class for adding zebra-stripes to a table
bordered - [Bool]
Same as .table-bordered class for adding borders on all sides of the table and cells
hover - [Bool]
Same as .table-hover class for adding a hover effect (grey background color) on table rows
condensed - [Bool]
Same as .table-condensed class for makeing a table more compact by cutting cell padding in half
cellEdit - [Object]
Assign a valid cellEdit object can enable the cell editing on the cell. The default usage is click/dbclick to trigger cell editing and press ENTER to save cell or press ESC to cancel editing.
Note: The
keyFieldcolumn can't be edited
Following is a cellEdit object:
{
mode: 'click',
blurToSave: true,
timeToCloseMessage: 2500,
onEditing: (rowId, dataField, newValue) => { ... },
beforeSaveCell: (oldValue, newValue, row, column) => { ... },
afterSaveCell: (oldValue, newValue, row, column) => { ... },
nonEditableRows: () => { ... }
}
cellEdit.mode - [String]
cellEdit.mode possible value is click and dbclick. It's required value that tell react-bootstrap-table2 how to trigger the cell editing.
cellEdit.blurToSave - [Bool]
Default is false, enable it will be able to save the cell automatically when blur from the cell editor.
cellEdit.nonEditableRows - [Function]
cellEdit.nonEditableRows accept a callback function and expect return an array which used to restrict all the columns of some rows as non-editable. So the each item in return array should be rowkey(keyField)
cellEdit.timeToCloseMessage - [Function]
If a column.validator defined and the new value is invalid, react-bootstrap-table2 will popup a alert at the bottom of editor. cellEdit.timeToCloseMessage is a chance to let you decide how long the alert should be stay. Default is 3000 millisecond.
selectRow - [Object]
Pass prop selectRow to enable row selection. For more detail, please navigate to row selection document.