diff --git a/src/components/Table/SortableTable.js b/src/components/Table/SortableTable.js
index 98656579d..18239f1dd 100644
--- a/src/components/Table/SortableTable.js
+++ b/src/components/Table/SortableTable.js
@@ -86,6 +86,7 @@ function getSelectableCell(row, rowSelected, onSelect) {
checked={rowSelected(row)}
onClick={(e) => e.stopPropagation()}
onChange={(e) => onSelect(row, e.target.checked)}
+ disabled={!!row.disabled}
/>
>
);
diff --git a/src/components/Table/SortableTable.spec.js b/src/components/Table/SortableTable.spec.js
index 33ca8e179..abf29dd8b 100644
--- a/src/components/Table/SortableTable.spec.js
+++ b/src/components/Table/SortableTable.spec.js
@@ -377,6 +377,24 @@ describe('', () => {
assert.equal(wrapper.find('input').length, 4, 'select checkbox missing');
});
+ it('should disable select checkbox when specified', () => {
+ const rows = [
+ { name: 'Alpha', disabled: false },
+ { name: 'Bravo', disabled: true },
+ { name: 'Charlie', disabled: true },
+ { name: 'Delta', disabled: true },
+ ];
+ const wrapper = mount(
+ false} />
+ );
+
+ const trs = wrapper.find('tr');
+ assert.equal(trs.at(1).find('input').prop('disabled'), false);
+ assert.equal(trs.at(2).find('input').prop('disabled'), true);
+ assert.equal(trs.at(3).find('input').prop('disabled'), true);
+ assert.equal(trs.at(4).find('input').prop('disabled'), true);
+ });
+
it('should call onSelect when clicked', () => {
const onSelect = sinon.stub();
const wrapper = mount(
diff --git a/src/components/Table/UncontrolledTable.js b/src/components/Table/UncontrolledTable.js
index b143e09fa..3e82209fe 100644
--- a/src/components/Table/UncontrolledTable.js
+++ b/src/components/Table/UncontrolledTable.js
@@ -78,7 +78,8 @@ export default class UncontrolledTable extends React.Component {
};
get allSelected() {
- return this.props.rows.length && this.state.selected.length === this.props.rows.length;
+ const selectableRows = this.props.rows.filter((row) => !row.disabled);
+ return this.props.rows.length && this.state.selected.length === selectableRows.length;
}
selected(value) {
@@ -97,7 +98,8 @@ export default class UncontrolledTable extends React.Component {
};
toggleAll = () => {
- const newSelection = this.allSelected ? [] : this.props.rows;
+ const selectableRows = this.props.rows.filter((row) => !row.disabled);
+ const newSelection = this.allSelected ? [] : selectableRows;
this.setState({ selected: newSelection }, () => {
this.props.onSelect(newSelection);
diff --git a/src/components/Table/UncontrolledTable.spec.js b/src/components/Table/UncontrolledTable.spec.js
index e9362058e..e95626443 100644
--- a/src/components/Table/UncontrolledTable.spec.js
+++ b/src/components/Table/UncontrolledTable.spec.js
@@ -302,6 +302,40 @@ describe('', () => {
assert.equal(ths.length, columns.length + 1); // For selectable column
});
+ it('should disable select checkbox when specified', () => {
+ const columns = [{ header: 'Name', cell: (row) => row.name }];
+ const rows = [
+ { name: 'Alpha', disabled: true },
+ { name: 'Bravo', disabled: false },
+ { name: 'Charlie', disabled: false },
+ { name: 'Delta' },
+ ];
+ const wrapper = mount();
+
+ const trs = wrapper.find('tr');
+ assert.equal(trs.at(1).find('input').prop('disabled'), true);
+ assert.equal(trs.at(2).find('input').prop('disabled'), false);
+ assert.equal(trs.at(3).find('input').prop('disabled'), false);
+ assert.equal(trs.at(4).find('input').prop('disabled'), false);
+ });
+
+ it('should only select on selectable rows when selecting selectAll', () => {
+ const columns = [{ header: 'Name', cell: (row) => row.name }];
+ const rows = [
+ { name: 'Alpha', disabled: true },
+ { name: 'Bravo', disabled: false },
+ { name: 'Charlie', disabled: false },
+ { name: 'Delta', disabled: false },
+ ];
+ const wrapper = mount();
+
+ wrapper
+ .find({ type: 'checkbox' })
+ .first()
+ .simulate('change', { target: { checked: true } });
+ assert.equal(wrapper.state().selected.length, 3);
+ });
+
it('should call onSelect when selectable row picked', () => {
const columns = [{ header: 'Name', cell: (row) => row }];
const rows = ['Alpha', 'Bravo', 'Charlie', 'Delta', 'Echo', 'Foxtrot', 'Golf', 'Hotel'];
diff --git a/src/components/Table/UncontrolledTable.stories.js b/src/components/Table/UncontrolledTable.stories.js
index 0026754dc..063b01228 100644
--- a/src/components/Table/UncontrolledTable.stories.js
+++ b/src/components/Table/UncontrolledTable.stories.js
@@ -77,6 +77,7 @@ const DATA = [
last: 'Turner',
email: 'maxine.turner@example.com',
dob: new Date(1961, 8, 19),
+ disabled: true,
},
{
key: '000',
@@ -85,6 +86,7 @@ const DATA = [
last: 'Headroom',
email: 'max.headroom@example.com',
dob: new Date(1984, 6, 1),
+ disabled: true,
},
];