@databiosphere/findable-ui 2.2.0 → 3.1.0

package/lib/providers/exploreState.js

@@ -96,6 +96,7 @@ var ExploreActionKind;
     ExploreActionKind["ApplySavedFilter"] = "APPLY_SAVED_FILTER";
     ExploreActionKind["ClearFilters"] = "CLEAR_FILTERS";
     ExploreActionKind["PaginateTable"] = "PAGINATE_TABLE";
+    ExploreActionKind["PatchExploreResponse"] = "PATCH_EXPLORE_RESPONSE";
     ExploreActionKind["ProcessExploreResponse"] = "PROCESS_EXPLORE_RESPONSE";
     ExploreActionKind["ProcessRelatedResponse"] = "PROCESS_RELATED_RESPONSE";
     ExploreActionKind["ResetExploreResponse"] = "RESET_EXPLORE_RESPONSE";
@@ -103,7 +104,9 @@ var ExploreActionKind;
     ExploreActionKind["SelectEntityType"] = "SELECT_ENTITY_TYPE";
     ExploreActionKind["ToggleEntityView"] = "TOGGLE_ENTITY_VIEW";
     ExploreActionKind["UpdateColumnVisibility"] = "UPDATE_COLUMN_VISIBILITY";
+    ExploreActionKind["UpdateEntityViewAccess"] = "UPDATE_ENTITY_VIEW_ACCESS";
     ExploreActionKind["UpdateFilter"] = "UPDATE_FILTER";
+    ExploreActionKind["UpdateRowSelection"] = "UPDATE_ROW_SELECTION";
     ExploreActionKind["UpdateSorting"] = "UPDATE_SORTING";
 })(ExploreActionKind = exports.ExploreActionKind || (exports.ExploreActionKind = {}));
 /**
@@ -159,6 +162,12 @@ function exploreReducer(state, action, exploreContext) {
             }
             return Object.assign(Object.assign({}, state), { paginationState: nextPaginationState });
         }
+        /**
+         * Patch explore response
+         */
+        case ExploreActionKind.PatchExploreResponse: {
+            return Object.assign(Object.assign({}, state), { entityPageState: (0, utils_2.updateEntityPageState)(state.tabValue, state.entityPageState, { rowSelection: {} }), listItems: (0, utils_2.patchEntityListItems)(state.listItems, payload.updatedListItems, payload.listItemKey) });
+        }
         /**
          * Process explore response
          **/
@@ -209,6 +218,18 @@ function exploreReducer(state, action, exploreContext) {
         case ExploreActionKind.ToggleEntityView: {
             return Object.assign(Object.assign({}, state), { isRelatedView: payload === ENTITY_VIEW.RELATED, listView: payload });
         }
+        /**
+         * Update column visibility
+         **/
+        case ExploreActionKind.UpdateColumnVisibility: {
+            return Object.assign(Object.assign({}, state), { entityPageState: (0, utils_2.updateEntityPageState)(state.tabValue, state.entityPageState, { columnsVisibility: payload }) });
+        }
+        /**
+         * Update entity view access
+         **/
+        case ExploreActionKind.UpdateEntityViewAccess: {
+            return Object.assign(Object.assign({}, state), { entityPageState: (0, utils_2.updateSelectColumnVisibility)(state, payload.canEdit) });
+        }
         /**
          * Update filter
          **/
@@ -219,7 +240,13 @@ function exploreReducer(state, action, exploreContext) {
                 filterState,
                 savedFilterState,
             });
-            return Object.assign(Object.assign({}, state), { filterCount: (0, utils_2.getFilterCount)(filterState), filterState, paginationState: (0, utils_2.resetPage)(state.paginationState) });
+            return Object.assign(Object.assign({}, state), { entityPageState: (0, utils_2.resetRowSelection)(state), filterCount: (0, utils_2.getFilterCount)(filterState), filterState, paginationState: (0, utils_2.resetPage)(state.paginationState) });
+        }
+        /**
+         * Update row selection
+         */
+        case ExploreActionKind.UpdateRowSelection: {
+            return Object.assign(Object.assign({}, state), { entityPageState: (0, utils_2.updateEntityPageState)(state.tabValue, state.entityPageState, { rowSelection: payload }) });
         }
         /**
          * Update sorting
@@ -227,12 +254,6 @@ function exploreReducer(state, action, exploreContext) {
         case ExploreActionKind.UpdateSorting: {
             return Object.assign(Object.assign({}, state), { entityPageState: (0, utils_2.updateEntityPageState)(state.tabValue, state.entityPageState, { sorting: payload }), paginationState: (0, utils_2.resetPage)(state.paginationState) });
         }
-        /**
-         * Update column visibility
-         **/
-        case ExploreActionKind.UpdateColumnVisibility: {
-            return Object.assign(Object.assign({}, state), { entityPageState: (0, utils_2.updateEntityPageState)(state.tabValue, state.entityPageState, { columnsVisibility: payload }) });
-        }
         default:
             return state;
     }

package/lib/theme/common/components.js

@@ -1198,6 +1198,10 @@ const MuiTableCell = (theme) => {
         styleOverrides: {
             body: Object.assign({}, theme.typography[typography_1.TEXT_BODY_400]),
             head: Object.assign(Object.assign({}, theme.typography[typography_1.TEXT_BODY_SMALL_500]), { padding: "20px" }),
+            paddingCheckbox: {
+                paddingRight: 0,
+                width: "unset",
+            },
             root: {
                 padding: "18px 20px",
             },

package/lib/views/ExploreView/exploreView.d.ts

@@ -1,4 +1,6 @@
 /// <reference types="react" />
 import { AzulEntitiesStaticResponse } from "../../apis/azul/common/entities";
-export declare type ExploreViewProps = AzulEntitiesStaticResponse;
+export interface ExploreViewProps extends AzulEntitiesStaticResponse {
+    className?: string;
+}
 export declare const ExploreView: (props: ExploreViewProps) => JSX.Element;

package/lib/views/ExploreView/exploreView.js

@@ -157,7 +157,7 @@ const ExploreView = (props) => {
                 react_1.default.createElement(clearAllFilters_1.ClearAllFilters, null),
                 react_1.default.createElement(searchAllFilters_1.SearchAllFilters, { categoryViews: categoryViews, drawerOpen: isDrawerOpen, onFilter: onFilterChange.bind(null, true) })),
             react_1.default.createElement(filters_1.Filters, { categoryFilters: categoryFilters, closeAncestor: onCloseDrawer, disabled: isRelatedView, onFilter: onFilterChange.bind(null, false), trackFilterOpened: trackingConfig === null || trackingConfig === void 0 ? void 0 : trackingConfig.trackFilterOpened }))),
-        react_1.default.createElement(index_1.Index, { List: renderList(exploreState, entityConfig, entityListType), ListHero: renderComponent(listHero), SideBarButton: tabletDown ? (react_1.default.createElement(sidebarButton_1.SidebarButton, { count: filterCount, label: "Filter", onClick: onOpenDrawer })) : undefined, SubTitleHero: renderComponent(subTitleHero), Summaries: renderSummary(summaryConfig, summaryResponse), Tabs: react_1.default.createElement(tabs_1.Tabs, { onTabChange: onTabChange, tabs: tabs, value: tabValue }), title: explorerTitle })));
+        react_1.default.createElement(index_1.Index, { className: props.className, List: renderList(exploreState, entityConfig, entityListType), ListHero: renderComponent(listHero), SideBarButton: tabletDown ? (react_1.default.createElement(sidebarButton_1.SidebarButton, { count: filterCount, label: "Filter", onClick: onOpenDrawer })) : undefined, SubTitleHero: renderComponent(subTitleHero), Summaries: renderSummary(summaryConfig, summaryResponse), Tabs: react_1.default.createElement(tabs_1.Tabs, { onTabChange: onTabChange, tabs: tabs, value: tabValue }), title: explorerTitle })));
 };
 exports.ExploreView = ExploreView;
 /**
@@ -206,7 +206,7 @@ function renderComponent(componentsConfig, response) {
  */
 function renderList(exploreState, entityConfig, entityListType) {
     const { isRelatedView, listItems, loading, paginationState, relatedListItems, tabValue, } = exploreState;
-    const { list, listView } = entityConfig;
+    const { getId: getRowId, list, listView } = entityConfig;
     const { columns: columnsConfig, defaultSort } = list;
     if (!exploreState || !tabValue) {
         return react_1.default.createElement(react_1.default.Fragment, null); //TODO: return the loading UI component
@@ -216,7 +216,7 @@ function renderList(exploreState, entityConfig, entityListType) {
         // loads with the previous tabs data on the first render after switching tabs. (or similar)
         return react_1.default.createElement(react_1.default.Fragment, null);
     }
-    return (react_1.default.createElement(tableCreator_1.TableCreator, { columns: columnsConfig, defaultSort: defaultSort, items: isRelatedView && relatedListItems ? relatedListItems : listItems !== null && listItems !== void 0 ? listItems : [], listView: listView, loading: loading, pages: paginationState.pages, pageSize: paginationState.pageSize, pagination: undefined, total: paginationState.rows }));
+    return (react_1.default.createElement(tableCreator_1.TableCreator, { columns: columnsConfig, defaultSort: defaultSort, getRowId: getRowId, items: isRelatedView && relatedListItems ? relatedListItems : listItems !== null && listItems !== void 0 ? listItems : [], listView: listView, loading: loading, pages: paginationState.pages, pageSize: paginationState.pageSize, pagination: undefined, total: paginationState.rows }));
 }
 /**
  * Renders Summaries component when all the following requirements are fulfilled:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databiosphere/findable-ui",
-  "version": "2.2.0",
+  "version": "3.1.0",
   "description": "",
   "scripts": {
     "test": "jest",

package/src/components/Detail/components/DetailViewTable/detailViewTable.tsx

@@ -7,7 +7,7 @@ import {
   RoundedPaper,
 } from "../../../common/Paper/paper.styles";
 import { NoResults } from "../../../NoResults/noResults";
-import { TableToolbar } from "../../../Table/components/TableToolbar/tableToolbar.styles";
+import { Toolbar } from "../../../Table/components/TableToolbar/tableToolbar.styles";
 import { Table } from "../Table/table";
 
 interface DetailViewTableProps<T extends object> {
@@ -32,7 +32,7 @@ export const DetailViewTable = <T extends object>({
   return items.length > 0 ? (
     <Paper className={className}>
       <GridPaper>
-        {tools && <TableToolbar>{tools}</TableToolbar>}
+        {tools && <Toolbar variant="table">{tools}</Toolbar>}
         <Table
           columns={columns}
           gridTemplateColumns={gridTemplateColumns}

package/src/components/Index/index.tsx

@@ -5,6 +5,7 @@ import { Hero } from "./components/Hero/hero";
 import { Index as IndexLayout } from "./index.styles";
 
 export interface IndexProps {
+  className?: string;
   List?: ReactNode;
   ListHero?: ReactNode | ReactNode[];
   SideBarButton?: ReactNode;
@@ -15,6 +16,7 @@ export interface IndexProps {
 }
 
 export const Index = ({
+  className,
   List,
   ListHero,
   SideBarButton,
@@ -26,7 +28,7 @@ export const Index = ({
   const { layoutState } = useLayoutState();
   const { headerHeight } = layoutState;
   return (
-    <IndexLayout marginTop={headerHeight}>
+    <IndexLayout className={className} marginTop={headerHeight}>
       <Hero SideBarButton={SideBarButton} Summaries={Summaries} title={title} />
       {SubTitleHero}
       {Tabs}

package/src/components/Table/common/utils.ts

@@ -334,6 +334,23 @@ function getVisibleRowsTableData<T>(rows: Row<T>[]): TableData[][] {
   );
 }
 
+/**
+ * Returns true if any or all table rows are selected.
+ * @param table - Table.
+ * @returns true if a row is selected.
+ */
+export function isAnyRowSelected<T>(table: Table<T>): boolean {
+  const {
+    getIsAllPageRowsSelected,
+    getIsSomePageRowsSelected,
+    options: { enableRowSelection },
+  } = table;
+  return Boolean(
+    enableRowSelection &&
+      (getIsSomePageRowsSelected() || getIsAllPageRowsSelected())
+  );
+}
+
 /**
  * Returns true if client-side filtering is enabled.
  * @param exploreMode - Explore mode.

package/src/components/Table/components/CheckboxMenu/checkboxMenu.styles.ts

@@ -1,9 +1,9 @@
 import styled from "@emotion/styled";
-import { Menu } from "@mui/material";
+import { Menu as MMenu } from "@mui/material";
 
-export const CheckboxMenu = styled(Menu)`
+export const Menu = styled(MMenu)`
   .MuiPaper-menu {
-    margin: 8px 0;
+    margin: 4px 0;
   }
 
   // List item button

package/src/components/Table/components/CheckboxMenu/checkboxMenu.tsx

@@ -9,7 +9,7 @@ import { ButtonTextPrimary } from "../../../common/Button/components/ButtonTextP
 import { DropdownButton } from "../../../common/Button/components/DropdownButton/dropdownButton";
 import { CheckedIcon } from "../../../common/CustomIcon/components/CheckedIcon/checkedIcon";
 import { UncheckedIcon } from "../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
-import { CheckboxMenu as Menu } from "./checkboxMenu.styles";
+import { Menu } from "./checkboxMenu.styles";
 
 type MenuListItemOnChangeFn = (event: unknown) => void; // see React Table VisibilityColumn "getToggleVisibilityHandler".
 type onResetFn = () => void; // see React Table VisibilityInstance "resetColumnVisibility".
@@ -46,7 +46,9 @@ export const CheckboxMenu = ({
 
   return (
     <>
-      <DropdownButton onClick={onOpenMenu}>{buttonLabel}</DropdownButton>
+      <DropdownButton onClick={onOpenMenu} open={open}>
+        {buttonLabel}
+      </DropdownButton>
       <Menu
         anchorEl={anchorEl}
         anchorOrigin={{ horizontal: "right", vertical: "bottom" }}

package/src/components/Table/components/TableCell/common/utils.ts

@@ -0,0 +1,16 @@
+import { TableCellProps as MTableCellProps } from "@mui/material/TableCell/TableCell";
+import { CoreCell, CoreHeader } from "@tanstack/table-core";
+import { ACCESSOR_KEYS } from "../../../../TableCreator/common/constants";
+
+/**
+ * Returns table cell padding based on the cell ID.
+ * @param id - Cell ID.
+ * @returns table cell padding.
+ */
+export function getTableCellPadding<T extends object, TValue>(
+  id: CoreHeader<T, TValue>["id"] | CoreCell<T, TValue>["id"]
+): MTableCellProps["padding"] {
+  if (id === ACCESSOR_KEYS.SELECT) {
+    return "checkbox";
+  }
+}

package/src/components/Table/components/TableCell/components/RowSelectionCell/rowSelectionCell.tsx

@@ -0,0 +1,24 @@
+import { Checkbox as MCheckbox } from "@mui/material";
+import { Row } from "@tanstack/react-table";
+import { RowData } from "@tanstack/table-core";
+import React from "react";
+import { CheckedIcon } from "../../../../../common/CustomIcon/components/CheckedIcon/checkedIcon";
+import { UncheckedIcon } from "../../../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
+
+export interface RowSelectionCellProps<T> {
+  row: Row<T>;
+}
+
+export const RowSelectionCell = <T extends RowData>({
+  row,
+}: RowSelectionCellProps<T>): JSX.Element => {
+  const { getIsSelected, getToggleSelectedHandler } = row;
+  return (
+    <MCheckbox
+      checked={getIsSelected()}
+      checkedIcon={<CheckedIcon />}
+      icon={<UncheckedIcon />}
+      onChange={getToggleSelectedHandler()}
+    />
+  );
+};

package/src/components/Table/components/TableHead/components/HeadSelectionCell/headSelectionCell.tsx

@@ -0,0 +1,31 @@
+import { Checkbox } from "@mui/material";
+import { Table } from "@tanstack/react-table";
+import { RowData } from "@tanstack/table-core";
+import React from "react";
+import { CheckedIcon } from "../../../../../common/CustomIcon/components/CheckedIcon/checkedIcon";
+import { IndeterminateIcon } from "../../../../../common/CustomIcon/components/IndeterminateIcon/indeterminateIcon";
+import { UncheckedIcon } from "../../../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
+
+export interface HeadSelectionCellProps<T> {
+  tableInstance: Table<T>;
+}
+
+export const HeadSelectionCell = <T extends RowData>({
+  tableInstance,
+}: HeadSelectionCellProps<T>): JSX.Element => {
+  const {
+    getIsAllPageRowsSelected,
+    getIsSomePageRowsSelected,
+    getToggleAllRowsSelectedHandler,
+  } = tableInstance;
+  return (
+    <Checkbox
+      checked={getIsAllPageRowsSelected()}
+      checkedIcon={<CheckedIcon />}
+      icon={<UncheckedIcon />}
+      indeterminate={getIsSomePageRowsSelected()}
+      indeterminateIcon={<IndeterminateIcon />}
+      onChange={getToggleAllRowsSelectedHandler()}
+    />
+  );
+};

package/src/components/Table/components/TableHead/tableHead.tsx

@@ -1,5 +1,5 @@
 import {
-  TableCell,
+  TableCell as MTableCell,
   TableHead as MTableHead,
   TableRow,
   TableSortLabel,
@@ -8,6 +8,7 @@ import { flexRender, Table } from "@tanstack/react-table";
 import React, { Fragment } from "react";
 import { ROW_DIRECTION } from "../../common/entities";
 import { getTableSortLabelProps } from "../../common/utils";
+import { getTableCellPadding } from "../TableCell/common/utils";
 
 export interface TableHeadProps<T> {
   rowDirection: ROW_DIRECTION;
@@ -25,14 +26,24 @@ export const TableHead = <T extends object>({
           <MTableHead key={headerGroup.id}>
             <TableRow>
               {headerGroup.headers.map((header) => (
-                <TableCell key={header.id}>
-                  <TableSortLabel {...getTableSortLabelProps(header.column)}>
-                    {flexRender(
+                <MTableCell
+                  key={header.id}
+                  padding={getTableCellPadding(header.id)}
+                >
+                  {header.column.getCanSort() ? (
+                    <TableSortLabel {...getTableSortLabelProps(header.column)}>
+                      {flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
+                    </TableSortLabel>
+                  ) : (
+                    flexRender(
                       header.column.columnDef.header,
                       header.getContext()
-                    )}
-                  </TableSortLabel>
-                </TableCell>
+                    )
+                  )}
+                </MTableCell>
               ))}
             </TableRow>
           </MTableHead>

package/src/components/Table/components/TableRows/tableRows.tsx

@@ -1,7 +1,8 @@
-import { TableCell, TableRow as MTableRow } from "@mui/material";
+import { TableCell as MTableCell, TableRow as MTableRow } from "@mui/material";
 import { flexRender, Row, Table } from "@tanstack/react-table";
 import { Virtualizer } from "@tanstack/react-virtual";
 import React, { Fragment } from "react";
+import { getTableCellPadding } from "../TableCell/common/utils";
 
 export interface TableRowsProps<T> {
   tableInstance: Table<T>;
@@ -25,13 +26,14 @@ export const TableRows = <T extends object>({
             data-index={virtualRow.index}
             ref={virtualizer.measureElement}
           >
-            {row.getVisibleCells().map((cell) => {
-              return (
-                <TableCell key={cell.id}>
-                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                </TableCell>
-              );
-            })}
+            {row.getVisibleCells().map((cell) => (
+              <MTableCell
+                key={cell.id}
+                padding={getTableCellPadding(cell.column.id)}
+              >
+                {flexRender(cell.column.columnDef.cell, cell.getContext())}
+              </MTableCell>
+            ))}
           </MTableRow>
         );
       })}

package/src/components/Table/components/TableToolbar/components/RowSelection/components/DropdownMenu/dropdownMenu.styles.ts

@@ -0,0 +1,8 @@
+import styled from "@emotion/styled";
+import { DropdownMenu as DXDropdownMenu } from "../../../../../../../common/DropdownMenu/dropdownMenu";
+
+export const DropdownMenu = styled(DXDropdownMenu)`
+  .MuiPaper-menu {
+    min-width: 288px;
+  }
+`;

package/src/components/Table/components/TableToolbar/components/RowSelection/components/DropdownMenu/dropdownMenu.tsx

@@ -0,0 +1,50 @@
+import { MenuProps as MMenuProps } from "@mui/material";
+import React from "react";
+import { DropdownButton as DXDropdownButton } from "../../../../../../../common/Button/components/DropdownButton/dropdownButton";
+import {
+  DropdownMenuButtonProps,
+  DropdownMenuItemProps,
+} from "../../../../../../../common/DropdownMenu/common/entities";
+import { DropdownMenuProps as DXDropdownMenuProps } from "../../../../../../../common/DropdownMenu/dropdownMenu";
+import { DropdownMenu as RowSelectionDropdownMenu } from "./dropdownMenu.styles";
+
+const DEFAULT_MENU_PROPS: Partial<MMenuProps> = {
+  anchorOrigin: { horizontal: "left", vertical: "bottom" },
+  transformOrigin: { horizontal: "left", vertical: "top" },
+};
+
+export interface DropdownMenuProps {
+  Button?: DXDropdownMenuProps["Button"];
+  buttonLabel?: string;
+  children: ({ closeMenu }: DropdownMenuItemProps) => JSX.Element[];
+  className?: string;
+}
+
+export const DropdownMenu = ({
+  Button = (props: DropdownMenuButtonProps): JSX.Element =>
+    renderButton({ children: buttonLabel, ...props }),
+  buttonLabel = "Edit",
+  children,
+  className,
+  ...props /* Spread props to allow for Mui Menu specific prop overrides e.g. "anchorOrigin". */
+}: DropdownMenuProps): JSX.Element => {
+  return (
+    <RowSelectionDropdownMenu
+      {...DEFAULT_MENU_PROPS}
+      className={className}
+      Button={Button}
+      {...props}
+    >
+      {({ closeMenu }): JSX.Element[] => children({ closeMenu })}
+    </RowSelectionDropdownMenu>
+  );
+};
+
+/**
+ * Return the dropdown button.
+ * @param props - Button props e.g. "onClick".
+ * @returns button element.
+ */
+function renderButton(props: DropdownMenuButtonProps): JSX.Element {
+  return <DXDropdownButton {...props} />;
+}

package/src/components/Table/components/TableToolbar/components/RowSelection/rowSelection.styles.ts

@@ -0,0 +1,8 @@
+import styled from "@emotion/styled";
+
+export const RowSelection = styled.div`
+  align-items: center;
+  display: flex;
+  gap: 16px;
+  justify-content: flex-start;
+`;

package/src/components/Table/components/TableToolbar/components/RowSelection/rowSelection.tsx

@@ -0,0 +1,30 @@
+import { Typography } from "@mui/material";
+import { Row } from "@tanstack/react-table";
+import React from "react";
+import { ComponentsConfig } from "../../../../../../config/entities";
+import { TEXT_BODY_400 } from "../../../../../../theme/common/typography";
+import { ComponentCreator } from "../../../../../ComponentCreator/ComponentCreator";
+import { RowSelection as RowSelectionActions } from "./rowSelection.styles";
+
+export interface RowSelectionProps<T> {
+  className?: string;
+  rows: Row<T>[];
+  rowSelectionView?: ComponentsConfig;
+}
+
+export const RowSelection = <T extends object>({
+  className,
+  rows,
+  rowSelectionView,
+}: RowSelectionProps<T>): JSX.Element | null => {
+  return (
+    <RowSelectionActions className={className}>
+      <Typography variant={TEXT_BODY_400}>
+        {rows.length} items selected:
+      </Typography>
+      {rowSelectionView ? (
+        <ComponentCreator components={rowSelectionView} response={rows} />
+      ) : null}
+    </RowSelectionActions>
+  );
+};

package/src/components/Table/components/TableToolbar/tableToolbar.styles.ts

@@ -1,14 +1,17 @@
 import styled from "@emotion/styled";
+import { Toolbar as MToolbar } from "@mui/material";
 import { white } from "../../../../styles/common/mixins/colors";
 import { Grid } from "../../../common/Grid/grid";
 
-export const TableToolbar = styled.div`
-  align-items: center;
-  background-color: ${white};
-  display: flex;
-  justify-content: space-between;
-  padding: 20px;
-`;
+export const Toolbar = styled(MToolbar)`
+  &.MuiToolbar-table {
+    align-items: center;
+    background-color: ${white};
+    display: flex;
+    justify-content: space-between;
+    padding: 20px;
+  }
+` as typeof MToolbar;
 
 export const ToolbarActions = styled(Grid)`
   gap: 8px;

package/src/components/Table/components/TableToolbar/tableToolbar.tsx

@@ -3,12 +3,12 @@ import React, { Fragment } from "react";
 import { ListViewConfig } from "../../../../config/entities";
 import { useExploreState } from "../../../../hooks/useExploreState";
 import { ROW_DIRECTION } from "../../common/entities";
-import { getEditColumnOptions } from "../../common/utils";
+import { getEditColumnOptions, isAnyRowSelected } from "../../common/utils";
 import { CheckboxMenu } from "../CheckboxMenu/checkboxMenu";
 import { DownloadEntityResults } from "../DownloadEntityResults/downloadEntityResults";
-import { EntityViewToggle } from "../EntityViewToggle/entityViewToggle";
 import { PaginationSummary } from "../PaginationSummary/paginationSummary";
-import { TableToolbar as Toolbar, ToolbarActions } from "./tableToolbar.styles";
+import { RowSelection } from "./components/RowSelection/rowSelection";
+import { Toolbar, ToolbarActions } from "./tableToolbar.styles";
 
 export interface TableToolbarProps<T> {
   listView?: ListViewConfig;
@@ -22,9 +22,9 @@ export const TableToolbar = <T extends object>({
   tableInstance,
 }: TableToolbarProps<T>): JSX.Element => {
   const { exploreState } = useExploreState();
-  const { paginationState, relatedListItems } = exploreState;
+  const { paginationState } = exploreState;
   const { currentPage, pages, pageSize, rows } = paginationState;
-  const { resetColumnVisibility } = tableInstance;
+  const { getSelectedRowModel, resetColumnVisibility } = tableInstance;
   const { enableDownload } = listView || {};
   const isLastPage = currentPage === pages;
   const editColumnOptions = getEditColumnOptions(tableInstance);
@@ -42,9 +42,12 @@ export const TableToolbar = <T extends object>({
   return (
     <Fragment>
       {showToolbar && (
-        <Toolbar>
-          {relatedListItems ? (
-            <EntityViewToggle />
+        <Toolbar variant="table">
+          {isAnyRowSelected(tableInstance) ? (
+            <RowSelection
+              rows={getSelectedRowModel().rows}
+              rowSelectionView={listView?.rowSelectionView}
+            />
           ) : (
             <PaginationSummary
               firstResult={(currentPage - 1) * pageSize + 1}

package/src/components/Table/table.tsx

@@ -8,11 +8,13 @@ import {
   getPaginationRowModel,
   getSortedRowModel,
   InitialTableState,
+  RowSelectionState,
   TableState,
   Updater,
   useReactTable,
   VisibilityState,
 } from "@tanstack/react-table";
+import { CoreOptions } from "@tanstack/table-core";
 import React, { useEffect } from "react";
 import { track } from "../../common/analytics/analytics";
 import {
@@ -51,6 +53,7 @@ import { GridTable } from "./table.styles";
 export interface TableProps<T extends object> {
   columns: ColumnDef<T>[];
   count?: number;
+  getRowId?: CoreOptions<T>["getRowId"];
   initialState: InitialTableState;
   items: T[];
   listView?: ListViewConfig;
@@ -67,6 +70,7 @@ export interface TableProps<T extends object> {
  * Uncontrolled table will take advantage of React Table's state and will be used for static loads.
  * @param tableProps - Set of props required for displaying the table.
  * @param tableProps.columns - Set of columns to display.
+ * @param tableProps.getRowId - Function to customize the row ID.
  * @param tableProps.initialState - Initial table state.
  * @param tableProps.items - Row data to display.
  * @param tableProps.listView - List view configuration.
@@ -75,6 +79,7 @@ export interface TableProps<T extends object> {
  */
 export const TableComponent = <T extends object>({
   columns,
+  getRowId,
   initialState,
   items,
   listView,
@@ -93,7 +98,8 @@ TableProps<T>): JSX.Element => {
     paginationState,
     tabValue,
   } = exploreState;
-  const { columnsVisibility, sorting } = entityPageState[tabValue];
+  const { columnsVisibility, enableRowSelection, rowSelection, sorting } =
+    entityPageState[tabValue];
   const { currentPage, pages, pageSize } = paginationState;
   const { disablePagination = false } = listView || {};
   const clientFiltering = isClientFilteringEnabled(exploreMode);
@@ -126,12 +132,20 @@ TableProps<T>): JSX.Element => {
     });
   };
 
+  const onRowSelectionChange = (updater: Updater<RowSelectionState>): void => {
+    exploreDispatch({
+      payload: typeof updater === "function" ? updater(rowSelection) : updater,
+      type: ExploreActionKind.UpdateRowSelection,
+    });
+  };
+
   const state: Partial<TableState> = {
     columnVisibility: columnsVisibility,
     pagination: {
       pageIndex: 0,
       pageSize: disablePagination ? Number.MAX_SAFE_INTEGER : pageSize,
     },
+    rowSelection,
     sorting,
   };
   const tableInstance = useReactTable({
@@ -140,6 +154,7 @@ TableProps<T>): JSX.Element => {
     enableColumnFilters: true, // client-side filtering.
     enableFilters: true, // client-side filtering.
     enableMultiSort: false,
+    enableRowSelection,
     enableSorting: true, // client-side filtering.
     enableSortingRemoval: false, // client-side filtering.
     getCoreRowModel: getCoreRowModel(),
@@ -149,11 +164,13 @@ TableProps<T>): JSX.Element => {
       : undefined,
     getFilteredRowModel: clientFiltering ? getFilteredRowModel() : undefined,
     getPaginationRowModel: getPaginationRowModel(),
+    getRowId,
     getSortedRowModel: clientFiltering ? getSortedRowModel() : undefined,
     initialState,
     manualPagination: clientFiltering,
     manualSorting: !clientFiltering,
     onColumnVisibilityChange,
+    onRowSelectionChange,
     onSortingChange,
     pageCount: total,
     state,