feat(table component): add callbacks for the table row selections

src/components/Table/Table.stories.tsx

@@ -1,9 +1,11 @@
+/* eslint-disable no-console */
 import React from "react";
 import { Story } from "@storybook/react";
 import { IconEmptyStateSVG } from "../../icons/";
 import Text from "../Text/Text";
 import Button from "../Button/Button";
 import Table, { Props } from "./Table";
+import { Row, Sorting } from "./types";
 
 const emptyState = {
   title: "No results found with these criteria",
@@ -60,12 +62,15 @@ export const WithSorting = Template.bind({});
 WithSorting.args = {
   sortable: true,
   sorting: { column: "id", isDescending: true },
+  onSortingChanged: (sorting: Sorting) => console.log(sorting),
 };
 
 export const WithRowSelection = Template.bind({});
 
 WithRowSelection.args = {
   selectable: true,
+  onRowSelect: (selectedRows: Row[]) => console.log(selectedRows),
+  onRowClick: (row: Row) => console.log(row),
 };
 
 export const WithoutData = Template.bind({});

src/components/Table/Table.tsx

@@ -16,7 +16,7 @@ type TableCompoundProps = {
 };
 
 const Table: FC<Props> & TableCompoundProps = (props) => {
-  const { columns, rows, emptyState, sortable = false, sorting, ...rest } = props;
+  const { columns, rows, emptyState, sortable = false, sorting, onRowSelect } = props;
 
   const defaultSorting: Sorting = sorting ?? {
     column: sortable ? columns[0].accessor : "",
@@ -31,6 +31,8 @@ const Table: FC<Props> & TableCompoundProps = (props) => {
     sorting: defaultSorting,
   });
 
+  const { selected } = state;
+
   useEffect(() => {
     dispatch({ type: Actions.columnsChanged, payload: columns });
   }, [columns]);
@@ -39,9 +41,13 @@ const Table: FC<Props> & TableCompoundProps = (props) => {
     dispatch({ type: Actions.rowsChanged, payload: rows });
   }, [rows]);
 
+  useEffect(() => {
+    onRowSelect && onRowSelect(selected);
+  }, [selected]);
+
   return (
     <div css={tableContainer} data-testid="table">
-      <table {...rest}>
+      <table>
         <Table.Header state={state} dispatch={dispatch} {...props} />
         <Table.Body state={state} dispatch={dispatch} {...props} />
       </table>

src/components/Table/__tests__/__snapshots__/Table.test.tsx.snap

@@ -6,9 +6,7 @@ exports[`<Table> matches snapshot 1`] = `
     class="css-sy84m1-tableContainer-tableContainer"
     data-testid="table"
   >
-    <table
-      id="table-1"
-    >
+    <table>
       <thead>
         <tr>
           <th

src/components/Table/components/Body.tsx

@@ -17,7 +17,7 @@ const Body: FC<ChildrenProps> = ({
   selectable,
   state,
   dispatch,
-  handleRowClick,
+  onRowClick,
   onHoveredRowChange,
 }) => {
   const { columns, selected, emptyState } = state;
@@ -51,7 +51,7 @@ const Body: FC<ChildrenProps> = ({
             return (
               <tr
                 key={rowKey}
-                className={rowClassnames(isSelected, Boolean(handleRowClick))}
+                className={rowClassnames(isSelected, Boolean(onRowClick))}
                 onMouseEnter={(): void => handleRowHover(row)}
                 onMouseLeave={(): void => handleRowHover(null)}
               >
@@ -74,7 +74,7 @@ const Body: FC<ChildrenProps> = ({
                     return (
                       <Cell
                         key={`entry-${row.id}-${accessor}`}
-                        onClick={handleRowClick ? (): void => handleRowClick(row) : undefined}
+                        onClick={onRowClick ? (): void => onRowClick(row) : undefined}
                       >
                         {rowObj(row)}
                       </Cell>
@@ -83,7 +83,7 @@ const Body: FC<ChildrenProps> = ({
                   return (
                     <Cell
                       key={`entry-${row.id}-${accessor}`}
-                      onClick={handleRowClick ? (): void => handleRowClick(row) : undefined}
+                      onClick={onRowClick ? (): void => onRowClick(row) : undefined}
                     >
                       {rowObj as string}
                     </Cell>

src/components/Table/components/Header.tsx

@@ -19,7 +19,7 @@ const Header: FC<ChildrenProps> = ({
   const isSelectAllChecked = selected.length > 0;
   const allRowsSelected = rowIds.every((rowId) => selectedIds.includes(rowId));
 
-  const handleCheckboxClick = (e: React.ChangeEvent<HTMLInputElement>): void => {
+  const handleToggleSelectAll = (e: React.ChangeEvent<HTMLInputElement>): void => {
     e.preventDefault();
     selected.length === 0
       ? dispatch({ type: Actions.selectAll, payload: null })
@@ -53,7 +53,7 @@ const Header: FC<ChildrenProps> = ({
               id="select-all"
               name="select-all"
               value="all"
-              onChange={handleCheckboxClick}
+              onChange={(e) => handleToggleSelectAll(e)}
               checked={isSelectAllChecked}
               isPartiallySelected={!allRowsSelected}
             />

src/components/Table/types.ts

@@ -35,8 +35,8 @@ export type TableProps = {
   sortable?: boolean;
   sorting?: Sorting;
   onSortingChanged?: (sorting: Sorting) => void;
-  //TODO: should be changed to onSelectedRowsChanged that would return the selected rows
-  handleRowClick?: (row: Row) => void;
+  onRowSelect?: (selectedRows: Row[]) => void;
+  onRowClick?: (row: Row) => void;
   onHoveredRowChange?: (hoveredRow: Row | null) => void;
 };