Merge pull request #228 from Peersyst/rc/feat/add-row-click-to-table

[RC] feat: add `onRowClick` prop to `Table`
Peersyst · Oct 21, 2024 · 55e8d2b · 55e8d2b
2 parents f30e3d6 + 7aacc64
commit 55e8d2b
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 14 deletions.
diff --git a/packages/genesys/packages/react-components/src/Table/Table.tsx b/packages/genesys/packages/react-components/src/Table/Table.tsx
@@ -37,6 +37,7 @@ const InnerTable = forwardRef(function InnerTable(
         data,
         autoResetPageIndex = false,
         sorting: sortingProp,
+        onRowClick,
         ...tableOptions
     } = useMergeDefaultProps("Table", props);
 
@@ -85,7 +86,7 @@ const InnerTable = forwardRef(function InnerTable(
                 <TableContainer className="TableContainer" ref={(r) => setRef(containerRef, r)}>
                     <TableElement className="Table">
                         <TableHead ref={headerRef} />
-                        <TableBody />
+                        <TableBody onRowClick={onRowClick} />
                     </TableElement>
                 </TableContainer>
                 {!loading && !rows.length && (

diff --git a/packages/genesys/packages/react-components/src/Table/Table.types.ts b/packages/genesys/packages/react-components/src/Table/Table.types.ts
@@ -13,6 +13,7 @@ export interface InnerTableProps<TData = any>
     className?: string;
     style?: CSSProperties;
     sorting?: SortingState;
+    onRowClick?: (row: TData) => void;
 }
 
 export interface TableProps<TData = any> extends InnerTableProps<TData> {

diff --git a/packages/genesys/packages/react-components/src/Table/TableBody/TableBody.styles.ts b/packages/genesys/packages/react-components/src/Table/TableBody/TableBody.styles.ts
@@ -1,15 +1,24 @@
-import styled from "styled-components";
+import { alpha } from "@peersyst/react-utils";
+import styled, { css } from "styled-components";
 
-export const TableBodyRoot = styled.tbody`
-    position: relative;
+export const TableBodyRoot = styled.tbody(
+    ({ theme }) => css`
+        position: relative;
 
-    background-color: inherit;
+        background-color: inherit;
 
-    tr {
-        height: 3.25rem;
+        tr {
+            height: 3.25rem;
 
-        td {
-            border-bottom: var(--table-cell-border);
+            &.TableRowClickable {
+                &:hover {
+                    background-color: ${alpha(theme.palette.primary, 0.1)};
+                }
+            }
+
+            td {
+                border-bottom: var(--table-cell-border);
+            }
         }
-    }
-`;
+    `,
+);
diff --git a/packages/genesys/packages/react-components/src/Table/TableBody/TableBody.tsx b/packages/genesys/packages/react-components/src/Table/TableBody/TableBody.tsx
@@ -3,16 +3,27 @@ import { TableBodyRoot } from "./TableBody.styles";
 import { useTable } from "../TableContext";
 import { forwardRef } from "react";
 import { setRef } from "@peersyst/react-utils";
+import { TableBodyProps } from "./TableBody.types";
+import clsx from "clsx";
 
-const TableBody = forwardRef(function TableBody(_, ref): JSX.Element {
+const TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>(function TableBody(
+    props,
+    ref,
+): JSX.Element {
     const { table } = useTable();
 
     const rows = table.getRowModel().rows;
 
+    const { onRowClick } = props;
+
     return (
         <TableBodyRoot ref={(r) => setRef(ref, r)} className="TableBody">
             {rows.map((row) => (
-                <tr className="TableRow TableBodyRow" key={row.id}>
+                <tr
+                    className={clsx("TableRow TableBodyRow", onRowClick && "TableRowClickable")}
+                    key={row.id}
+                    onClick={() => onRowClick && onRowClick(row.original)}
+                >
                     {row.getVisibleCells().map((cell) => {
                         const cellContext = cell.getContext();
                         const columnDef = cellContext.column.columnDef;

diff --git a/packages/genesys/packages/react-components/src/Table/TableBody/TableBody.types.ts b/packages/genesys/packages/react-components/src/Table/TableBody/TableBody.types.ts
@@ -0,0 +1,3 @@
+import { TableProps } from "../Table.types";
+
+export type TableBodyProps = Pick<TableProps, "onRowClick">;
diff --git a/packages/genesys/packages/react-components/src/Table/TableBody/index.tsx b/packages/genesys/packages/react-components/src/Table/TableBody/index.tsx
@@ -1,2 +1,3 @@
 export { default as TableBody } from "./TableBody";
 export * from "./TableBody.styles";
+export * from "./TableBody.types";
diff --git a/packages/genesys/packages/react-components/storybook/stories/Table/Table.stories.tsx b/packages/genesys/packages/react-components/storybook/stories/Table/Table.stories.tsx
@@ -26,6 +26,13 @@ Empty.args = {
     columns,
 };
 
+export const RowClickable = Template.bind({});
+RowClickable.args = {
+    data,
+    columns,
+    onRowClick: (row) => console.log(row)
+};
+
 const ManualSortingTemplate: ComponentStory<typeof ManualSortingTable> = (args) => (
     <ManualSortingTable style={{ height: "400px" }} {...args} />
 );
@@ -40,4 +47,4 @@ const PaginatedTemplate: ComponentStory<typeof ManualPaginationTable> = (args) =
 export const Paginated = PaginatedTemplate.bind({});
 Paginated.args = {
     columns,
-};
+};
diff --git a/packages/genesys/packages/react-components/storybook/stories/Table/Table.utils.tsx b/packages/genesys/packages/react-components/storybook/stories/Table/Table.utils.tsx
@@ -67,6 +67,7 @@ export const columns: ColumnDef<Person>[] = [
     {
         accessorKey: "firstName",
         cell: (info) => info.getValue(),
+        header: () => <span>First Name</span>,
     },
     {
         accessorFn: (row) => row.lastName,
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { TableProps } from "../Table.types";

		export type TableBodyProps = Pick<TableProps, "onRowClick">;