feat(Table): add hover styles for interactive rows (#93)

Co-authored-by: kseniyakuzina <kseniyakuzina@yandex-team.ru>
gravity-ui · Jan 20, 2025 · 371d444 · 371d444
1 parent ad6ef23
commit 371d444
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 8 deletions.
diff --git a/src/components/Table/Table.scss b/src/components/Table/Table.scss
@@ -33,9 +33,17 @@ $block: '.#{variables.$ns}styled-table';
         border-block-end: 1px solid var(--g-color-line-generic);
     }
 
-    &__row:last-of-type {
-        #{$block}__cell {
-            border-block-end: none;
+    &__row {
+        &_interactive {
+            &:hover {
+                background-color: var(--g-color-base-generic);
+            }
+        }
+
+        &:last-of-type {
+            #{$block}__cell {
+                border-block-end: none;
+            }
         }
     }
 }
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
@@ -24,6 +24,7 @@ export const Table = React.forwardRef(
             rowClassName: rowClassNameProp,
             headerClassName,
             size = 'm',
+            onRowClick,
             ...props
         }: TableProps<TData, TScrollElement>,
         ref: React.Ref<HTMLTableElement>,
@@ -53,12 +54,14 @@ export const Table = React.forwardRef(
         }, [footerCellClassNameProp]);
 
         const rowClassName: TableProps<TData>['rowClassName'] = React.useMemo(() => {
+            const modifiers = {interactive: Boolean(onRowClick)};
+
             if (typeof rowClassNameProp === 'function') {
-                return (...args) => b('row', rowClassNameProp(...args));
+                return (...args) => b('row', modifiers, rowClassNameProp(...args));
             }
 
-            return b('row', rowClassNameProp);
-        }, [rowClassNameProp]);
+            return b('row', modifiers, rowClassNameProp);
+        }, [onRowClick, rowClassNameProp]);
 
         return (
             <BaseTable
@@ -69,6 +72,7 @@ export const Table = React.forwardRef(
                 headerCellClassName={headerCellClassName}
                 headerClassName={b('header', headerClassName)}
                 rowClassName={rowClassName}
+                onRowClick={onRowClick}
                 {...props}
             />
         );

diff --git a/src/components/Table/__stories__/Table.stories.tsx b/src/components/Table/__stories__/Table.stories.tsx
@@ -23,6 +23,16 @@ export const Default: StoryObj<typeof DefaultStory> = {
     render: DefaultStory,
 };
 
+export const WithInteractiveRows: StoryObj<typeof DefaultStory> = {
+    render: DefaultStory,
+};
+
+WithInteractiveRows.args = {
+    onRowClick: (row) => {
+        alert(`Row "${row.original.name}" clicked`);
+    },
+};
+
 export const SizeS: StoryObj<typeof SizeSStory> = {
     render: SizeSStory,
 };

diff --git a/src/components/Table/__stories__/stories/DefaultStory.tsx b/src/components/Table/__stories__/stories/DefaultStory.tsx
@@ -4,12 +4,13 @@ import {useTable} from '../../../../hooks';
 import {columns} from '../../../BaseTable/__stories__/constants/columns';
 import {data} from '../../../BaseTable/__stories__/constants/data';
 import {Table} from '../../index';
+import type {TableProps} from '../../index';
 
-export const DefaultStory = () => {
+export const DefaultStory = (props: Omit<TableProps<(typeof data)[0]>, 'table'>) => {
     const table = useTable({
         columns,
         data,
     });
 
-    return <Table table={table} />;
+    return <Table table={table} {...props} />;
 };