From d63d925d2c00e8d1dc839ec274b5525a8079b3e7 Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Sun, 13 Sep 2026 17:21:37 +0100
Subject: [PATCH] Enhance ObjectTable Row Selection with Dynamic Class Handling

- Introduced a new getRowClassName function to dynamically apply the 'object-table-row-selected' class based on bulk selection criteria.
- Updated the ObjectTable component to utilize the new row class logic, improving visual feedback for selected rows.
- Enhanced CSS styles for selected rows in the dashboard table, providing distinct background colors for better user experience during selection and hover states.
---
 assets/stylesheets/App.css                    | 42 +++++++++++++++++++
 .../Dashboard/common/ObjectTable.jsx          | 13 ++++++
 2 files changed, 55 insertions(+)

diff --git a/assets/stylesheets/App.css b/assets/stylesheets/App.css
index a0d62271..2290b9ae 100644
--- a/assets/stylesheets/App.css
+++ b/assets/stylesheets/App.css
@@ -1480,6 +1480,48 @@ span.ant-skeleton-input.ant-skeleton-input-sm.text-skeleton {
   opacity: 0;
 }
 
+.ant-table-wrapper.dashboard-table
+  .ant-table-tbody
+  > tr.object-table-row-selected
+  > .ant-table-cell,
+.ant-table-wrapper.dashboard-table
+  .ant-table-tbody
+  > tr.object-table-row-selected
+  > .ant-table-cell.ant-table-cell-fix-left,
+.ant-table-wrapper.dashboard-table
+  .ant-table-tbody
+  > tr.object-table-row-selected
+  > .ant-table-cell.ant-table-cell-fix-right {
+  background-color: color-mix(
+    in srgb,
+    var(--color-primary) 5%,
+    var(--color-button-background)
+  );
+}
+
+.ant-table-wrapper.dashboard-table
+  .ant-table-tbody
+  > tr.object-table-row-selected:hover
+  > .ant-table-cell,
+.ant-table-wrapper.dashboard-table
+  .ant-table-tbody
+  > tr.object-table-row-selected
+  > .ant-table-cell.ant-table-cell-row-hover,
+.ant-table-wrapper.dashboard-table
+  .ant-table-tbody
+  > tr.object-table-row-selected:hover
+  > .ant-table-cell.ant-table-cell-fix-left,
+.ant-table-wrapper.dashboard-table
+  .ant-table-tbody
+  > tr.object-table-row-selected:hover
+  > .ant-table-cell.ant-table-cell-fix-right {
+  background-color: color-mix(
+    in srgb,
+    var(--color-primary) 15%,
+    var(--color-button-background)
+  );
+}
+
 .objectKanbanContainerWrapper {
   position: relative;
   width: 100%;
diff --git a/src/components/Dashboard/common/ObjectTable.jsx b/src/components/Dashboard/common/ObjectTable.jsx
index d80fa09e..9159fe8a 100644
--- a/src/components/Dashboard/common/ObjectTable.jsx
+++ b/src/components/Dashboard/common/ObjectTable.jsx
@@ -2266,6 +2266,18 @@ const ObjectTable = forwardRef(
       [isEditing, registerForm]
     )
 
+    const getRowClassName = useCallback(
+      (record) =>
+        classNames({
+          'object-table-row-selected':
+            canBulkSelect &&
+            !record?.isSkeleton &&
+            (bulkSelection?.allMatching === true ||
+              selectedRowIdSet.has(String(record?._id)))
+        }),
+      [bulkSelection?.allMatching, canBulkSelect, selectedRowIdSet]
+    )
+
     useEffect(() => {
       const container = tableContentRef.current
 
@@ -2406,6 +2418,7 @@ const ObjectTable = forwardRef(
                   size={size}
                   components={components}
                   onRow={onRow}
+                  rowClassName={getRowClassName}
                 />
               </Spin>
             )}