playbook_ui 13.15.0.pre.alpha.1132globalpropdatepickerspacing1929 → 13.16.0.pre.alpha.PBNTR177NewAdvancedTableKit2010

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d3d5b87f2b6c16e79587bb3c5e948214ab861f720b447f1de049940fe74d6d3f
-  data.tar.gz: 35f0b35d0c9e112c30f0ca5af3916e1b57f05068650e320c1da973a97cf12936
+  metadata.gz: f15a8ac0110aaa64e75c62164518fb815e028873c5909c72a57b6322c2b98661
+  data.tar.gz: fbe1cc5a5f53f2c9387b9b2ff209abe5c9f808d16f248a285e20bb9ab980c33e
 SHA512:
-  metadata.gz: dcec116e1d5fb1e095e0b92fec1a0a80f85407472821bcd7a22bafdafbd6e3d412d72237ab150c3338e934043e7a5427e567ceb87b2615836716e1cf2928c5a1
-  data.tar.gz: 88b6924b8a19996f02acad09f739e80a04aec6c2caf49374bb5ec37709f84939c29ecc8a9e591297d4d436c5e80c2c5060552423a073ba1bc3be4c02e38b4be8
+  metadata.gz: ab28994eae8dd6bcceb5d9ca44a65ec378060cba26a86c519742e892fc721b13ff6fca4a1f526385c942f4db7b30e9f8f3a96d37b6e7c1571bf84e76bf6f9a40
+  data.tar.gz: a23907ecbcf8a0afa5a3abca06e60b9c18e227a0f5bac019731d9be43f209ef689159e2d5b067d4a511ed8d1245739372689385d2e6830ff17dac8363d866d61

data/app/pb_kits/playbook/_playbook.scss

@@ -1,16 +1,17 @@
+
+
+@import 'pb_advanced_table/advanced_table';
+@import 'pb_avatar/avatar';
+@import 'pb_avatar_action_button/avatar_action_button';
 @import 'pb_background/background';
+@import 'pb_badge/badge';
+@import 'pb_bar_graph/bar_graph';
 @import 'pb_body/body';
 @import 'pb_bread_crumbs/bread_crumbs';
 @import 'pb_button/button';
 @import 'pb_button_toolbar/button_toolbar';
 @import 'pb_caption/caption';
 @import 'pb_card/card';
-@import 'pb_detail/detail';
-@import 'pb_title/title';
-@import 'pb_avatar/avatar';
-@import 'pb_avatar_action_button/avatar_action_button';
-@import 'pb_badge/badge';
-@import 'pb_bar_graph/bar_graph';
 @import 'pb_checkbox/checkbox';
 @import 'pb_circle_chart/circle_chart';
 @import 'pb_circle_icon_button/circle_icon_button';
@@ -20,21 +21,22 @@
 @import 'pb_dashboard_value/dashboard_value';
 @import 'pb_date/date';
 @import 'pb_date_picker/date_picker';
-@import 'pb_date_time/date_time';
 @import 'pb_date_range_inline/date_range_inline';
 @import 'pb_date_range_stacked/date_range_stacked';
 @import 'pb_date_stacked/date_stacked';
+@import 'pb_date_time/date_time';
 @import 'pb_date_time_stacked/date_time_stacked';
 @import 'pb_date_year_stacked/date_year_stacked';
+@import 'pb_detail/detail';
 @import 'pb_dialog/dialog';
 @import 'pb_distribution_bar/distribution_bar';
 @import 'pb_file_upload/file_upload';
 @import 'pb_filter/filter';
 @import 'pb_fixed_confirmation_toast/fixed_confirmation_toast';
+@import 'pb_flex/flex';
 @import 'pb_form/form';
 @import 'pb_form_group/form_group';
 @import 'pb_form_pill/form_pill';
-@import 'pb_flex/flex';
 @import 'pb_gauge/gauge';
 @import 'pb_hashtag/hashtag';
 @import 'pb_highlight/highlight';
@@ -55,6 +57,7 @@
 @import 'pb_map/map';
 @import 'pb_map/pb_map_button_mixin';
 @import 'pb_message/message';
+@import 'pb_multi_level_select/multi_level_select';
 @import 'pb_multiple_users/multiple_users';
 @import 'pb_multiple_users_stacked/multiple_users_stacked';
 @import 'pb_nav/nav';
@@ -85,9 +88,11 @@
 @import 'pb_text_input/text_input';
 @import 'pb_textarea/textarea';
 @import 'pb_time/time';
-@import 'pb_timeline/timeline';
 @import 'pb_time_range_inline/time_range_inline';
+@import 'pb_time_stacked/time_stacked';
+@import 'pb_timeline/timeline';
 @import 'pb_timestamp/timestamp';
+@import 'pb_title/title';
 @import 'pb_title_count/title_count';
 @import 'pb_title_detail/title_detail';
 @import 'pb_toggle/toggle';
@@ -96,7 +101,6 @@
 @import 'pb_typeahead/typeahead';
 @import 'pb_user/user';
 @import 'pb_user_badge/user_badge';
-@import 'pb_time_stacked/time_stacked';
 @import 'pb_walkthrough/walkthrough';
 @import 'pb_weekday_stacked/weekday_stacked';
 @import './utilities/mixins';
@@ -115,5 +119,3 @@
 @import './utilities/text_align';
 @import './utilities/overflow';
 @import './utilities/truncate';
-
-@import 'pb_multi_level_select/multi_level_select';

data/app/pb_kits/playbook/index.js

@@ -4,6 +4,7 @@ import 'lazysizes/plugins/attrchange/ls.attrchange'
 import 'lazysizes'
 
 // vvv React Component JSX Imports from the React Kits vvv
+export { default as AdvancedTable} from './pb_advanced_table/_advanced_table'
 export { default as Avatar } from './pb_avatar/_avatar'
 export { default as AvatarActionButton } from './pb_avatar_action_button/_avatar_action_button'
 export { default as Background } from './pb_background/_background'
@@ -59,8 +60,8 @@ export { default as LineGraph } from './pb_line_graph/_line_graph'
 export { default as List } from './pb_list/_list'
 export { default as ListItem } from './pb_list/_list_item'
 export { default as LoadingInline } from './pb_loading_inline/_loading_inline'
-export { default as Map} from './pb_map/_map'
 export { default as MapCustomButton } from './pb_map/_map_custom_button'
+export { default as Map} from './pb_map/_map'
 export { default as Message } from './pb_message/_message'
 export { default as MultiLevelSelect} from './pb_multi_level_select/_multi_level_select'
 export { default as MultipleUsers } from './pb_multiple_users/_multiple_users'

data/app/pb_kits/playbook/pb_advanced_table/Components/CollapsibleTrail.tsx

@@ -0,0 +1,30 @@
+import React from "react"
+
+//CollapsibleTrail component
+const CollapsibleTrail = ({ leftOffset }: { leftOffset: number }) => {
+  const style: { [key: string]: string | number } = {
+    position: "absolute",
+    left: `${leftOffset}rem`,
+    top: 0,
+    bottom: 0,
+    width: "2px",
+    backgroundColor: "#E4E8F0",
+  }
+
+  return <div style={style} />
+}
+
+// Updated function to render multiple trails depending on depth
+export const renderCollapsibleTrail = (currentDepth: number) => {
+  const lines = []
+  for (let i = 1; i <= currentDepth; i++) {
+    // Calculate leftOffset with additional 0.4rem for each depth level above 1
+    const additionalOffset = i > 1 ? (i - 1) * 0.4 : 0
+    const leftOffset = i * 1.6 + additionalOffset
+    lines.push(<CollapsibleTrail key={i} 
+        leftOffset={leftOffset} 
+               />
+              )
+  }
+  return lines
+}

data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx

@@ -0,0 +1,59 @@
+import React, { useContext } from "react";
+
+import Flex from "../../pb_flex/_flex";
+import FlexItem from "../../pb_flex/_flex_item";
+import Icon from "../../pb_icon/_icon";
+import { GlobalProps } from "../../utilities/globalProps";
+
+import { Getter, Row } from "@tanstack/react-table";
+import { DataType } from "../Utilities/types";
+import AdvancedTableContext from "../Context/AdvancedTableContext";
+
+interface CustomCellProps {
+  row: Row<DataType>;
+  getValue?: Getter<string>;
+  value?: string;
+  onRowToggleClick?: (arg: Row<DataType>) => void;
+} 
+
+export const CustomCell = ({
+  row,
+  getValue,
+  value,
+  onRowToggleClick,
+}: CustomCellProps & GlobalProps) => {
+  const { setExpanded, expanded } = useContext(AdvancedTableContext);
+  const RowWithoutChildren = row.originalSubRows === undefined;
+
+  const handleOnExpand = (row: Row<DataType>) => {
+    onRowToggleClick && onRowToggleClick(row);
+    setExpanded({ ...expanded, [row.id]: !row.getIsExpanded() });
+  };
+
+  return (
+    <div style={{ paddingLeft: `${row.depth * 2}rem` }}>
+      <Flex alignItems="center" 
+          columnGap="xs"
+          orientation="row"
+      >
+        {!RowWithoutChildren ? (
+          <button
+              className="gray-icon expand-toggle-icon"
+              onClick={() => handleOnExpand(row)}
+          >
+            {row.getIsExpanded() ? (
+              <Icon icon="circle-play" 
+                  rotation={90}
+              />
+            ) : (
+              <Icon icon="circle-play" />
+            )}
+          </button>
+        ) : null}
+        <FlexItem paddingLeft={!RowWithoutChildren ? "none" : "xs"}>
+          {row.depth === 0 ? getValue() : value}
+        </FlexItem>
+      </Flex>
+    </div>
+  );
+};

data/app/pb_kits/playbook/pb_advanced_table/Components/LoadingCell.tsx

@@ -0,0 +1,5 @@
+import React from "react"
+
+export const LoadingCell = () => {
+  return <div className="loading-cell" />
+}

data/app/pb_kits/playbook/pb_advanced_table/Components/SortIconButton.tsx

@@ -0,0 +1,30 @@
+import React from "react"
+import Icon from "../../pb_icon/_icon"
+import { Header } from "@tanstack/react-table"
+import { DataType } from "../Utilities/types"
+import { displayIcon } from "../Utilities/helper_functions"
+
+type SortIconButtonProps = {
+  header: Header<DataType, unknown>
+  sortIcon?: string | string[]
+}
+export const SortIconButton = ({ header, sortIcon }: SortIconButtonProps) => {
+
+  return (
+    <>
+      {header.column.getIsSorted() === "desc" ? (
+        <div className="year-sort-icon" 
+            key={displayIcon(sortIcon)[0]}
+        >
+          <Icon icon={displayIcon(sortIcon)[0]} />
+        </div>
+      ) : (
+        <div className="year-sort-icon" 
+            key={displayIcon(sortIcon)[1]}
+        >
+          <Icon icon={displayIcon(sortIcon)[1]} />
+        </div>
+      )}
+    </>
+  )
+}

data/app/pb_kits/playbook/pb_advanced_table/Components/SubRowHeaderRow.tsx

@@ -0,0 +1,61 @@
+import React from "react"
+import Flex from "../../pb_flex/_flex"
+import Caption from "../../pb_caption/_caption"
+import { Row, Table } from "@tanstack/react-table"
+
+import { ToggleIconButton } from "./ToggleIconButton"
+import { renderCollapsibleTrail } from "./CollapsibleTrail"
+
+import { isChrome } from "../Utilities/helper_functions"
+import { DataType } from "../Utilities/types"
+import { GlobalProps } from "../../utilities/globalProps"
+
+interface SubRowHeaderRowProps {
+  onClick: (row: Row<DataType>) => void
+  row: Row<DataType>
+  table: Table<DataType>
+  collapsibleTrail?: boolean
+  subRowHeaders?: string[]
+  enableToggleExpansion?: "all" | "header"
+}
+
+export const SubRowHeaderRow = ({
+  row,
+  table,
+  onClick,
+  collapsibleTrail,
+  subRowHeaders,
+  enableToggleExpansion,
+}: SubRowHeaderRowProps & GlobalProps) => {
+  const numberOfColumns = table.getAllFlatColumns().length
+
+  return (
+    <tr className="custom-row bg-silver">
+      <td
+          className={`custom-row-first-column ${
+          isChrome() ? "chrome-styles" : ""
+          }`}
+          colSpan={1}
+      >
+        {collapsibleTrail && row.depth > 0 && renderCollapsibleTrail(row.depth)}
+        <div style={{ paddingLeft: `${row.depth * 2}rem` }}>
+          <Flex align="center" 
+              columnGap="xs"
+          >
+            {enableToggleExpansion === "all" && row.getCanExpand() ? (
+              <ToggleIconButton onClick={onClick} 
+                  row={row}
+              />
+            ) : null}
+            <Caption
+                marginLeft={row.getCanExpand() ? "none" : "xs"}
+                text={subRowHeaders[row.depth - 1]}
+            />
+          </Flex>
+        </div>
+      </td>
+
+      <td colSpan={numberOfColumns - 1} />
+    </tr>
+  )
+}

data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx

@@ -0,0 +1,120 @@
+import React, { useContext } from "react"
+import Flex from "../../pb_flex/_flex"
+import { flexRender, Header } from "@tanstack/react-table"
+
+import { SortIconButton } from "./SortIconButton"
+import { ToggleIconButton } from "./ToggleIconButton"
+import { isChrome } from "../Utilities/helper_functions"
+import { DataType } from "../Utilities/types"
+import AdvancedTableContext from "../Context/AdvancedTableContext"
+import { GlobalProps } from "../../utilities/globalProps"
+
+type TableHeaderCellProps = {
+  headerChildren?: React.ReactNode | React.ReactNode[]
+  enableSorting?: boolean
+  enableToggleExpansion?: "all" | "header"
+  handleExpandOrCollapse?: () => void
+  header?: Header<DataType, unknown>
+  headerId?: string
+  loading?: boolean
+  sortIcon?: string | string[]
+} & GlobalProps
+
+export const TableHeaderCell = ({
+  header,
+  headerId,
+  enableSorting,
+  sortIcon,
+  headerChildren,
+  loading,
+  enableToggleExpansion,
+  handleExpandOrCollapse,
+}: TableHeaderCellProps) => {
+  const { sortControl } = useContext(AdvancedTableContext)
+
+  const toggleSortButton = (event: React.SyntheticEvent) => {
+    if (sortControl) {
+      const sortIsDesc = header.column.getIsSorted() === "desc"
+      sortIsDesc
+        ? sortControl.onChange({ desc: true })
+        : sortControl.onChange({ desc: false })
+    } else {
+      header.column.getToggleSortingHandler()(event)
+    }
+  }
+
+  return (
+    <th
+        align="right"
+        className={`table-header-cells ${isChrome() ? "chrome-styles" : ""}`}
+        id={`${
+          loading
+            ? `loading-${header.id}-${headerId}`
+            : `${header.id}-${headerId}`
+        }`}
+        key={`${header.id}-header`}
+    >
+      {header.isPlaceholder ? null : headerChildren && header.index === 0 ? (
+        <Flex alignItems="center">
+          {headerChildren}
+          <div>
+            {flexRender(header.column.columnDef.header, header.getContext())}
+          </div>
+        </Flex>
+      ) : (
+        <Flex
+            alignItems="center"
+            justify={header.index === 0 ? "between" : "none"}
+            paddingLeft={loading ? "sm" : "none"}
+        >
+          {header.index === 0 &&
+            !loading &&
+            (enableToggleExpansion === "all" || "header") && (
+              <ToggleIconButton onClick={handleExpandOrCollapse} />
+            )}
+
+          {header.index === 0 &&
+            loading &&
+            (enableToggleExpansion === "all" || "header") && (
+              <div className="loading-toggle-icon header-toggle-icon" />
+            )}
+
+          <Flex
+              className={`${header.index === 0 &&
+                enableSorting &&
+                "header-sort-button pb_th_link"}`}
+              cursor={header.index === 0 && enableSorting ? "pointer" : "default"}
+              {...(header.index === 0 &&
+                enableSorting && {
+                  htmlOptions: {
+                    onClick: (event: React.MouseEvent) => toggleSortButton(event),
+                    onKeyDown: (event: React.KeyboardEvent) => {
+                      if (event.key === "Enter") {
+                        toggleSortButton(event)
+                      }
+                    },
+                    tabIndex: 0,
+                  },
+                })}
+              justify={header.index === 0 && enableSorting ? "between" : "none"}
+          >
+            <div>
+              {flexRender(header.column.columnDef.header, header.getContext())}
+            </div>
+
+            {header.index === 0 &&
+              header.column.getCanSort() &&
+              enableSorting &&
+              (loading ? (
+                <div className="loading-toggle-icon header-sort-icon" />
+              ) : (
+                <SortIconButton header={header} 
+                    sortIcon={sortIcon} 
+                />
+              ))}
+          </Flex>
+        </Flex>
+      )}
+    </th>
+  )
+}

data/app/pb_kits/playbook/pb_advanced_table/Components/ToggleIconButton.tsx

@@ -0,0 +1,28 @@
+import React, { useContext } from "react"
+import Icon from "../../pb_icon/_icon"
+import { Row } from "@tanstack/react-table"
+import AdvancedTableContext from "../Context/AdvancedTableContext"
+import { DataType } from "../Utilities/types"
+import { displayIcon } from "../Utilities/helper_functions"
+
+interface ToggleIconButtonProps {
+  row?: Row<DataType>
+  onClick: (row: Row<DataType>) => void
+}
+
+export const ToggleIconButton = ({ row, onClick }: ToggleIconButtonProps) => {
+  const { toggleExpansionIcon } = useContext(AdvancedTableContext)
+  return (
+    <button
+        className="gray-icon time-period-toggle-icon"
+        key={displayIcon(toggleExpansionIcon)[0]}
+        onClick={() => onClick(row)}
+    >
+      <Icon
+          cursor="pointer"
+          fixedWidth
+          icon={displayIcon(toggleExpansionIcon)[0]}
+      />
+    </button>
+  )
+}

data/app/pb_kits/playbook/pb_advanced_table/Context/AdvancedTableContext.tsx

@@ -0,0 +1,5 @@
+import { createContext } from "react"
+
+const AdvancedTableContext = createContext<any>({})
+
+export default AdvancedTableContext

data/app/pb_kits/playbook/pb_advanced_table/SubComponents/TableBody.tsx

@@ -0,0 +1,95 @@
+import React, { useContext } from "react"
+import LoadingInline from "../../pb_loading_inline/_loading_inline"
+import { flexRender, Row } from "@tanstack/react-table"
+
+import { SubRowHeaderRow } from "../Components/SubRowHeaderRow"
+import { LoadingCell } from "../Components/LoadingCell"
+import { renderCollapsibleTrail } from "../Components/CollapsibleTrail"
+import AdvancedTableContext from "../Context/AdvancedTableContext"
+import { isChrome } from "../Utilities/helper_functions"
+import { DataType } from "../Utilities/types"
+
+type TableBodyProps = {
+  collapsibleTrail?: boolean
+  subRowHeaders?: string[]
+}
+
+export const TableBody = ({
+  collapsibleTrail = true,
+  subRowHeaders,
+}: TableBodyProps) => {
+  const {
+    table,
+    handleExpandOrCollapse,
+    loading,
+    enableToggleExpansion,
+  } = useContext(AdvancedTableContext)
+  return (
+    <>
+      <tbody>
+        {table.getRowModel().rows.map((row: Row<DataType>) => {
+          const isExpandable = row.getIsExpanded()
+          const isFirstChildofSubrow = row.depth > 0 && row.index === 0
+          const rowHasNoChildren = !row.original.children?.length
+          const numberOfColumns = table.getAllFlatColumns().length
+
+          return (
+            <React.Fragment key={`${row.index}-${row.id}-${row.depth}-row`}>
+              {isFirstChildofSubrow && subRowHeaders && (
+                <SubRowHeaderRow
+                    collapsibleTrail={collapsibleTrail}
+                    enableToggleExpansion={enableToggleExpansion}
+                    onClick={handleExpandOrCollapse}
+                    row={row}
+                    subRowHeaders={subRowHeaders}
+                    table={table}
+                />
+              )}
+
+              <tr
+                  className={`${isExpandable ? "bg-silver" : "bg-white"} ${
+                    row.depth > 0 ? `depth-sub-row-${row.depth}` : ""
+                  }`}
+                  id={`${row.index}-${row.id}-${row.depth}-row`}
+              >
+                {row.getVisibleCells().map((cell, i) => (
+                  <td
+                      align="right"
+                      className={`${cell.id}-cell position_relative ${
+                      isChrome() ? "chrome-styles" : ""
+                      }`}
+                      key={`${cell.id}-data`}
+                  >
+                    {collapsibleTrail &&
+                      i === 0 &&
+                      row.depth > 0 &&
+                      renderCollapsibleTrail(row.depth)}
+                    <span id={`${cell.id}-span`}>
+                      {loading ? (
+                        <LoadingCell />
+                      ) : (
+                        flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext()
+                        )
+                      )}
+                    </span>
+                  </td>
+                ))}
+              </tr>
+
+              {/* Display LoadingInline if getYearData is querying and there are no children already */}
+              {isExpandable && rowHasNoChildren && row.depth === 0 ? (
+                <tr key={`${row.id}-row`}>
+                  <td colSpan={numberOfColumns}>
+                    <LoadingInline />
+                  </td>
+                </tr>
+              ) : null}
+            </React.Fragment>
+          )
+        })}
+      </tbody>
+    </>
+  )
+}

data/app/pb_kits/playbook/pb_advanced_table/SubComponents/TableHeader.tsx

@@ -0,0 +1,51 @@
+import React, { useContext } from "react"
+import { HeaderGroup } from "@tanstack/react-table"
+import AdvancedTableContext from "../Context/AdvancedTableContext"
+import { TableHeaderCell } from "../Components/TableHeaderCell"
+import { DataType } from "../Utilities/types"
+
+type TableHeaderProps = {
+  headerId?: string
+  enableSorting?: boolean
+  sortIcon?: string | string[]
+  children?: React.ReactNode | React.ReactNode[]
+}
+
+export const TableHeader = ({
+  headerId,
+  enableSorting = false,
+  children,
+  sortIcon = ["arrow-up-short-wide", "arrow-down-short-wide"],
+}: TableHeaderProps) => {
+  const {
+    table,
+    handleExpandOrCollapse,
+    loading,
+    enableToggleExpansion,
+  } = useContext(AdvancedTableContext)
+
+  return (
+    <>
+      <thead>
+        {/* Get the header groups (only one in this example) */}
+        {table.getHeaderGroups().map((headerGroup: HeaderGroup<DataType>) => (
+          <tr key={`${headerGroup.id}-headerGroup`}>
+            {headerGroup.headers.map(header => (
+              <TableHeaderCell
+                  enableSorting={enableSorting}
+                  enableToggleExpansion={enableToggleExpansion}
+                  handleExpandOrCollapse={handleExpandOrCollapse}
+                  header={header}
+                  headerChildren={children}
+                  headerId={headerId}
+                  key={`${header.id}-header`}
+                  loading={loading}
+                  sortIcon={sortIcon}
+              />
+            ))}
+          </tr>
+        ))}
+      </thead>
+    </>
+  )
+}

data/app/pb_kits/playbook/pb_advanced_table/Utilities/helper_functions.tsx

@@ -0,0 +1,77 @@
+import { RowModel } from "@tanstack/react-table"
+import { DataType, ExpandedStateObject } from "./types"
+
+const filterExpandableRows = (expandedState: Record<string, boolean>) => {
+  for (const expandedRow in expandedState) {
+    if (expandedState[expandedRow] === false) {
+      delete expandedState[expandedRow]
+    }
+  }
+  return expandedState
+}
+
+export const updateExpandAndCollapseState = (
+  tableRows: RowModel<DataType>,
+  expanded: Record<string, boolean>,
+  targetParent: string
+) => {
+  const updateExpandedRows: Record<string, boolean> = {}
+  const rows = tableRows.flatRows
+  // Variable checks if all rows in a section have same expansion state or not
+  let isExpansionConsistent = true
+  const areRowsExpanded = new Set<boolean>()
+
+  // Update isExpansionConsistent variable
+  for (const row of rows) {
+    if (
+      row.getCanExpand() &&
+      (targetParent === undefined
+        ? row.depth === 0
+        : targetParent === row.parentId)
+    ) {
+      areRowsExpanded.add(row.getIsExpanded())
+      if (areRowsExpanded.size > 1) {
+        isExpansionConsistent = false
+        break
+      }
+    }
+  }
+
+  // The if statement runs only for row depth 0, the else statement for the rest
+  if (targetParent === undefined) {
+    rows.forEach(row => {
+      if (row.depth === 0) {
+        updateExpandedRows[row.id] = !isExpansionConsistent
+          ? true
+          : !row.getIsExpanded()
+      }
+    })
+  } else {
+    for (const row of rows) {
+      if (row.getCanExpand() && targetParent === row.parentId) {
+        updateExpandedRows[row.id] = !isExpansionConsistent
+          ? true
+          : !row.getIsExpanded()
+      }
+    }
+  }
+
+  return filterExpandableRows({
+    ...(expanded as ExpandedStateObject),
+    ...updateExpandedRows,
+  })
+}
+
+//Checking browser. Using this to add classname and css for browser specific issues with table borders
+export const isChrome = () => {
+  const userAgent = navigator.userAgent.toLowerCase()
+  return userAgent.includes("chrome") && !userAgent.includes("edg")
+}
+
+// Logic for handling icons related props to allow for string or array of strings
+export const displayIcon = (icon: string | string[]) => {
+  if (typeof icon === "string") {
+    return [icon, icon]
+  }
+  return icon
+}