diff --git a/resources/js/Components/DataTable/TableCell.jsx b/resources/js/Components/DataTable/TableCell.jsx
index f2363bdc3..0352410bc 100644
--- a/resources/js/Components/DataTable/TableCell.jsx
+++ b/resources/js/Components/DataTable/TableCell.jsx
@@ -1,3 +1,6 @@
+import {type Cash} from 'cash-dom/dist/cash';
+import {inRange} from 'lodash-es';
+
 import Component from '../Component.jsx';
 
 /**
@@ -16,4 +19,30 @@ export default class TableCell extends Component {
 
     return <td {...this.attrs.all()}>{vnode.children}</td>;
   }
+
+  oncreate(vnode) {
+    super.oncreate(vnode);
+
+    const checkboxes = (): Cash => $(this.element)
+      .closest('.mdc-data-table')
+      .find('tbody tr[checkable] mwc-checkbox');
+
+    const cell: Cash = $(this.element);
+    cell.children('mwc-checkbox').on('change', (event) => {
+      const row = cell.parent();
+      row.toggleClass('mdc-data-table__row--selected');
+
+      const headerCheckbox = cell.closest('.mdc-data-table').find('thead th mwc-checkbox');
+      const checks = checkboxes();
+      const checked = checks.filter('[checked]');
+
+      if (inRange(checked.length, 1, checks.length)) {
+        headerCheckbox.prop('indeterminate', true);
+        headerCheckbox.prop('checked', false);
+      } else {
+        headerCheckbox.prop('checked', checks.length === checked.length);
+        headerCheckbox.prop('indeterminate', false);
+      }
+    });
+  }
 }