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} /> )}