diff --git a/components/lib/datatable/HeaderCell.js b/components/lib/datatable/HeaderCell.js
index 7587b1fefb..56f384bf6e 100644
--- a/components/lib/datatable/HeaderCell.js
+++ b/components/lib/datatable/HeaderCell.js
@@ -304,7 +304,9 @@ export const HeaderCell = React.memo((props) => {
if (props.showSelectAll && getColumnProp('selectionMode') === 'multiple' && props.filterDisplay !== 'row') {
const allRowsSelected = props.allRowsSelected(props.value);
- return ;
+ return (
+
+ );
}
return null;
diff --git a/components/lib/datatable/TableHeader.js b/components/lib/datatable/TableHeader.js
index 3216aaedeb..ddac9f50ac 100644
--- a/components/lib/datatable/TableHeader.js
+++ b/components/lib/datatable/TableHeader.js
@@ -168,11 +168,11 @@ export const TableHeader = React.memo((props) => {
});
};
- const createCheckbox = (selectionMode) => {
+ const createCheckbox = (column, selectionMode) => {
if (props.showSelectAll && selectionMode === 'multiple') {
const allRowsSelected = props.allRowsSelected(props.value);
- return ;
+ return ;
}
return null;
@@ -209,7 +209,7 @@ export const TableHeader = React.memo((props) => {
const { filterHeaderStyle, style, filterHeaderClassName, className, frozen, columnKey, field, selectionMode, filter } = ColumnBase.getCProps(col);
const colStyle = { ...(filterHeaderStyle || {}), ...(style || {}) };
const colKey = columnKey || field || i;
- const checkbox = createCheckbox(selectionMode);
+ const checkbox = createCheckbox(col, selectionMode);
const filterRow = createFilter(col, filter);
const headerCellProps = mergeProps(
{