playbook_ui 14.12.0.pre.alpha.testingwithfas5689 → 14.12.0.pre.rc.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 118e3587939bb84671bccc4390ad79174dd29888629095d7b41a87b4f19a21f5
-  data.tar.gz: 35966f16ead94ebcbf4ff0fd09d195aa48f74932d6155498c763fbbc9c6192f0
+  metadata.gz: 1587a0420362a389fb2fcb0100f37e36130a14336f053fcfa5fbeeb3a10e6ae6
+  data.tar.gz: fbf2cebdbb85b51ef5c9e62d8b641b1ad5f8da7c200e47430913226e202328bf
 SHA512:
-  metadata.gz: c0f3e34148f3abee7d290544f34bdf511e6acce53b83f212d0c7acc1278478c80c38ff327682fd271b931875a8ee369d9ed4f3621cb3ce8c3c30504c636deafe
-  data.tar.gz: 217f1c57eca819e3370d1e7414776542a48d5107ff50a279daa2e87743b55e7281c25483a8d547f45137140d188838d377b7360ab83888323e051dff4d609dd8
+  metadata.gz: 219a82e513045e8b8ea5cdd25a142e83e2f8bbe2756b388bb4ccc17c3b26625d13547d516bd2ddc01a206b0c1874e0a29751296286215847d9126ad530fb7767
+  data.tar.gz: 4aaed2b382ea917e35346102bf9c52220e299cfa1227eb2cef3d1d65a893cfd4e038675a383ca4460bce3745c35ec820d464d95438c628795eb0afbde20e91ee

data/app/pb_kits/playbook/_playbook.scss

@@ -1,4 +1,3 @@
-
 @import 'pb_advanced_table/advanced_table';
 @import 'pb_avatar/avatar';
 @import 'pb_avatar_action_button/avatar_action_button';
@@ -109,7 +108,6 @@
 @import 'pb_user_badge/user_badge';
 @import 'pb_walkthrough/walkthrough';
 @import 'pb_weekday_stacked/weekday_stacked';
-@import 'pb_icon_button/icon_button';
 @import 'utilities/mixins';
 @import 'utilities/spacing';
 @import 'utilities/cursor';

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

@@ -8,7 +8,6 @@ import { GlobalProps } from "../../utilities/globalProps"
 import Flex from "../../pb_flex/_flex"
 import FlexItem from "../../pb_flex/_flex_item"
 import Icon from "../../pb_icon/_icon"
-import Checkbox from "../../pb_checkbox/_checkbox"
 
 import AdvancedTableContext from "../Context/AdvancedTableContext"
 
@@ -18,7 +17,6 @@ interface CustomCellProps {
   row: Row<GenericObject>
   value?: string
   customRenderer?: (row: Row<GenericObject>, value: string | undefined) => React.ReactNode
-  selectableRows?: boolean
 } 
 
 export const CustomCell = ({
@@ -27,9 +25,8 @@ export const CustomCell = ({
   row,
   value,
   customRenderer,
-  selectableRows,
 }: CustomCellProps & GlobalProps) => {
-  const { setExpanded, expanded, expandedControl, inlineRowLoading, hasAnySubRows } = useContext(AdvancedTableContext);
+  const { setExpanded, expanded, expandedControl, inlineRowLoading } = useContext(AdvancedTableContext);
 
   const handleOnExpand = (row: Row<GenericObject>) => {
     onRowToggleClick && onRowToggleClick(row);
@@ -44,23 +41,10 @@ export const CustomCell = ({
 
   return (
     <div style={{ paddingLeft: `${row.depth * 1.25}em` }}>
-      <Flex 
-          alignItems="center" 
+      <Flex alignItems="center" 
           columnGap="xs"
-          justify={!hasAnySubRows ? "end" : "start"}
           orientation="row"
       >
-        {
-          selectableRows && hasAnySubRows && (
-          <Checkbox
-              checked={row.getIsSelected()}
-              disabled={!row.getCanSelect()}
-              indeterminate={row.getIsSomeSelected()}
-              name={row.id}
-              onChange={row.getToggleSelectedHandler()}
-          />
-          )
-        }
         {renderButton ? (
           <button
               className="gray-icon expand-toggle-icon"

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

@@ -1,13 +1,12 @@
 import React, { useContext } from "react"
 import classnames from "classnames"
-import { flexRender, Header, Table } from "@tanstack/react-table"
+import { flexRender, Header } from "@tanstack/react-table"
 
 import { GenericObject } from "../../types"
 
 import { GlobalProps } from "../../utilities/globalProps"
 
 import Flex from "../../pb_flex/_flex"
-import Checkbox from "../../pb_checkbox/_checkbox"
 
 import { SortIconButton } from "./SortIconButton"
 import { ToggleIconButton } from "./ToggleIconButton"
@@ -25,7 +24,6 @@ type TableHeaderCellProps = {
   isPinnedLeft?: boolean
   loading?: boolean
   sortIcon?: string | string[]
-  table?: Table<GenericObject>
 } & GlobalProps
 
 export const TableHeaderCell = ({
@@ -37,13 +35,9 @@ export const TableHeaderCell = ({
   isPinnedLeft = false,
   loading,
   sortIcon,
-  table
 }: TableHeaderCellProps) => {
-  const { sortControl, responsive, selectableRows, hasAnySubRows, showActionsBar } =
-    useContext(AdvancedTableContext);
+  const { sortControl, responsive } = useContext(AdvancedTableContext)
 
-  type justifyTypes = "none" | "center" | "start" | "end" | "between" | "around" | "evenly"
-  
   const toggleSortButton = (event: React.SyntheticEvent) => {
     if (sortControl) {
       const sortIsDesc = header?.column.getIsSorted() === "desc"
@@ -65,7 +59,6 @@ export const TableHeaderCell = ({
  
 const cellClassName = classnames(
   "table-header-cells",
-  `${showActionsBar && "header-cells-with-actions"}`,
   `${isChrome() ? "chrome-styles" : ""}`,
   `${enableSorting ? "table-header-cells-active" : ""}`,
   { "pinned-left": responsive === "scroll" && isPinnedLeft },
@@ -89,14 +82,8 @@ const isToggleExpansionEnabled =
   (enableToggleExpansion === "all" || "header") &&
   enableToggleExpansion !== "none"
 
-  let justifyHeader:justifyTypes;
+const justifyHeader = isLeafColumn ? "end" : "center"
 
-  if (header?.index === 0 && hasAnySubRows) {
-    justifyHeader = enableSorting ? "between" : "start";
-  } else {
-    justifyHeader = isLeafColumn ? "end" : "center";
-  }
-  
   return (
     <th
         align="right"
@@ -115,18 +102,9 @@ const isToggleExpansionEnabled =
       ) : (
         <Flex
             alignItems="center"
-            justify={justifyHeader}
+            justify={header?.index === 0 && enableSorting ? "between" : header?.index === 0 && !enableSorting ? "start" : justifyHeader}
         >
-          {
-            selectableRows && header?.index === 0 && hasAnySubRows && (
-              <Checkbox
-                  checked={table?.getIsAllRowsSelected()}
-                  indeterminate={table?.getIsSomeRowsSelected()}
-                  onChange={table?.getToggleAllRowsSelectedHandler()}
-              />
-            )
-          }
-          {isToggleExpansionEnabled && hasAnySubRows && (
+          {isToggleExpansionEnabled && (
               <ToggleIconButton onClick={handleExpandOrCollapse} />
             )}
 

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

@@ -9,7 +9,6 @@ import { globalProps } from "../../utilities/globalProps"
 import { isChrome } from "../Utilities/BrowserCheck"
 
 import LoadingInline from "../../pb_loading_inline/_loading_inline"
-import Checkbox from "../../pb_checkbox/_checkbox"
 
 import { SubRowHeaderRow } from "../Components/SubRowHeaderRow"
 import { LoadingCell } from "../Components/LoadingCell"
@@ -43,8 +42,6 @@ export const TableBody = ({
     loading,
     responsive,
     table,
-    selectableRows,
-    hasAnySubRows
   } = useContext(AdvancedTableContext)
 
   const classes = classnames(
@@ -68,7 +65,7 @@ export const TableBody = ({
           const numberOfColumns = table.getAllFlatColumns().length
           const isDataLoading = isExpandable && (inlineRowLoading && rowHasNoChildren) && (row.depth < columnDefinitions[0].cellAccessors?.length)
           const rowBackground = isExpandable && ((!inlineRowLoading && row.getCanExpand()) || (inlineRowLoading && rowHasNoChildren))
-          const rowColor = row.getIsSelected() ? "bg-row-selection" : rowBackground ? "bg-silver" : "bg-white"
+
           return (
             <React.Fragment key={`${row.index}-${row.id}-${row.depth}-row`}>
               {isFirstChildofSubrow && subRowHeaders && (
@@ -82,23 +79,11 @@ export const TableBody = ({
                 />
               )}
             <tr
-                className={`${rowColor} ${
+                className={`${rowBackground ? "bg-silver" : "bg-white"} ${
                   row.depth > 0 ? `depth-sub-row-${row.depth}` : ""
               }`}
                 id={`${row.index}-${row.id}-${row.depth}-row`}
             >
-              {/* Render custom checkbox column when we want selectableRows for non-expanding tables */}
-              {selectableRows && !hasAnySubRows && (
-                  <td className="checkbox-cell">
-                    <Checkbox
-                        checked={row.getIsSelected()}
-                        disabled={!row.getCanSelect()}
-                        indeterminate={row.getIsSomeSelected()}
-                        name={row.id}
-                        onChange={row.getToggleSelectedHandler()}
-                    />
-                  </td>
-                )}
               {row.getVisibleCells().map((cell, i) => {
                 const isPinnedLeft = columnPinning.left.includes(cell.column.id)
                 const isLastCell = cell.column.parent?.columns.at(-1)?.id === cell.column.id

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

@@ -7,10 +7,8 @@ import { GenericObject } from "../../types"
 import { buildCss } from "../../utilities/props"
 import { globalProps } from "../../utilities/globalProps"
 
-import Checkbox from "../../pb_checkbox/_checkbox"
-
 import { TableHeaderCell } from "../Components/TableHeaderCell"
-import { isChrome } from "../Utilities/BrowserCheck"
+
 import AdvancedTableContext from "../Context/AdvancedTableContext"
 
 type TableHeaderProps = {
@@ -36,10 +34,6 @@ export const TableHeader = ({
     handleExpandOrCollapse,
     loading,
     table,
-    hasAnySubRows,
-    showActionsBar,
-    selectableRows,
-    responsive
   } = useContext(AdvancedTableContext)
 
   const classes = classnames(
@@ -50,12 +44,6 @@ export const TableHeader = ({
 
   const columnPinning = table.getState().columnPinning;
 
-  const customCellClassnames = classnames(
-    "table-header-cells-custom",
-    `${showActionsBar && "header-cells-with-actions"}`,
-    `${isChrome() ? "chrome-styles" : ""}`,
-    `${responsive === "scroll" && "pinned-left"}`,
-  );
   return (
     <>
       <thead className={classes}
@@ -64,15 +52,6 @@ export const TableHeader = ({
         {/* Get the header groups (only one in this example) */}
         {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>) => (
           <tr key={`${headerGroup.id}-headerGroup`}>
-            {!hasAnySubRows && selectableRows && (
-              <th className={customCellClassnames}>
-                <Checkbox
-                    checked={table?.getIsAllRowsSelected()}
-                    indeterminate={table?.getIsSomeRowsSelected()}
-                    onChange={table?.getToggleAllRowsSelectedHandler()}
-                />
-              </th>
-            )}
             {headerGroup.headers.map(header => {
               const isPinnedLeft = columnPinning.left.includes(header.id)
               return (
@@ -86,7 +65,6 @@ export const TableHeader = ({
                     key={`${header.id}-header`}
                     loading={loading}
                     sortIcon={sortIcon}
-                    table={table}
                 />
               )
             })}

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -23,20 +23,10 @@
     background-color: $white;
   }
 
-  .bg-row-selection {
-    background-color: $info_subtle;
-  }
-
   .full-width {
     width: 100%;
   }
 
-  .row-selection-actions-card {
-    border-bottom-right-radius: 0px !important;
-    border-bottom-left-radius: 0px !important;
-    border-bottom-color: transparent;
-  }
-
   .table-header-cells:first-child {
     min-width: 180px;
   }
@@ -57,16 +47,6 @@
     th[colspan]:not([colspan="1"]) {
       border-right: 1px solid $border_light !important;
     }
-    .table-header-cells-custom {
-      text-align:center;
-      [class^=pb_checkbox_kit] .pb_checkbox_label {
-        padding-left: 0px;
-      }
-    }
-    .header-cells-with-actions {
-      border-top-left-radius: 0px !important;
-      border-top-right-radius: 0px !important;
-    }
   }
 
   .pb_advanced_table_body {
@@ -79,14 +59,6 @@
     tr .pb_table_td:last-child {
       padding-right: 8px !important;
     }
-
-    .checkbox-cell {
-      display: flex;
-      justify-content: center;
-      [class^=pb_checkbox_kit] .pb_checkbox_label {
-        padding-left: 0px;
-      }
-    }
   }
 
 
@@ -144,7 +116,6 @@
 
   // Vertical separator
   .table-header-cells:first-child,
-  .table-header-cells-custom:first-child,
   td:first-child,
   .pb_table_td:first-child {
     box-shadow: 1px 0px 0px 0px $border_light !important;

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx

@@ -12,17 +12,12 @@ import {
   Row,
   useReactTable,
   Getter,
-  RowSelectionState
 } from "@tanstack/react-table"
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props"
 import { globalProps, GlobalProps } from "../utilities/globalProps"
 
 import Table from "../pb_table/_table"
-import Card from "../pb_card/_card"
-import Caption from "../pb_caption/_caption"
-import Flex from "../pb_flex/_flex"
-import FlexItem from "../pb_flex/_flex_item"
 
 import AdvancedTableContext from "./Context/AdvancedTableContext"
 
@@ -35,7 +30,6 @@ import Pagination from "../pb_pagination/_pagination"
 
 type AdvancedTableProps = {
   aria?: { [key: string]: string }
-  actions?: React.ReactNode[] | React.ReactNode
   children?: React.ReactNode | React.ReactNode[]
   className?: string
   columnDefinitions: GenericObject[]
@@ -53,20 +47,16 @@ type AdvancedTableProps = {
   pagination?: boolean,
   paginationProps?: GenericObject
   responsive?: "scroll" | "none",
-  selectableRows?: boolean,
-  showActionsBar?: boolean,
   sortControl?: GenericObject
   tableData: GenericObject[]
   tableOptions?: GenericObject
   tableProps?: GenericObject
   toggleExpansionIcon?: string | string[]
-  onRowSelectionChange?: (arg: RowSelectionState) => void
 } & GlobalProps
 
 const AdvancedTable = (props: AdvancedTableProps) => {
   const {
     aria = {},
-    actions,
     children,
     className,
     columnDefinitions,
@@ -84,14 +74,11 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     pagination = false,
     paginationProps,
     responsive = "scroll",
-    showActionsBar = true,
-    selectableRows,
     sortControl,
     tableData,
     tableOptions,
     tableProps,
     toggleExpansionIcon = "arrows-from-line",
-    onRowSelectionChange,
   } = props
 
   const [loadingStateRowCount, setLoadingStateRowCount] = useState(
@@ -109,9 +96,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
 
   const columnHelper = createColumnHelper()
 
-  //Row Selection
-  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
-
   //Create cells for columns, with customization for first column
   const createCellFunction = (cellAccessors: string[], customRenderer?: (row: Row<GenericObject>, value: any) => JSX.Element, index?: number) => {
     const columnCells = ({
@@ -132,7 +116,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
                     getValue={getValue}
                     onRowToggleClick={onRowToggleClick}
                     row={row}
-                    selectableRows={selectableRows}
                 />
           )
         }
@@ -145,7 +128,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
                 customRenderer={customRenderer}
                 onRowToggleClick={onRowToggleClick}
                 row={row} 
-                selectableRows={selectableRows}
                 value={accessorValue} 
             />
           ) : (
@@ -207,13 +189,9 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     },
   ]
 
-  const customState = () => {
-    if (sortControl && selectableRows) {
-      return { state: { expanded, sorting, rowSelection } }
-    } else if (sortControl) {
+  const expandAndSortState = () => {
+    if (sortControl) {
       return { state: { expanded, sorting } }
-    } else if (selectableRows) {
-      return { state: { expanded, rowSelection } }
     } else {
       return { state: { expanded } }
     }
@@ -241,24 +219,13 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     getSortedRowModel: getSortedRowModel(),
     enableSortingRemoval: false,
     sortDescFirst: true,
-    onRowSelectionChange: setRowSelection,
-    getRowId: selectableRows ? row => row.id : undefined,
-    ...customState(),
-    ...paginationInitializer,
+    ...expandAndSortState(),
+    ... paginationInitializer,
     ...tableOptions,
   })
 
   const tableRows = table.getRowModel()
 
-  const hasAnySubRows = tableRows.rows.some(row => row.subRows && row.subRows.length > 0);
-  const selectedRowsLength = Object.keys(table.getState().rowSelection).length
-
-  useEffect(() => {
-    if (onRowSelectionChange) {
-      onRowSelectionChange(table.getState().rowSelection)
-    }
-  } , [table.getState().rowSelection, onRowSelectionChange])
-
   // Set table row count for loading state
   const updateLoadingStateRowCount = useCallback(() => {
     const rowsCount = table.getRowModel().rows.length
@@ -317,9 +284,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             sortControl,
             table,
             toggleExpansionIcon,
-            showActionsBar,
-            selectableRows,
-            hasAnySubRows
           }}
       >
         <>
@@ -333,27 +297,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
                   total={table.getPageCount()}
                   />
           }
-          {
-            selectableRows && showActionsBar && (
-              <Card className="row-selection-actions-card"
-                  padding="xs"
-              >
-                <Flex alignItems="center"
-                    justify="between"
-                >
-                    <Caption color="light"
-                        paddingLeft="xs"
-                        size="xs"
-                    >
-                      {selectedRowsLength} Selected
-                    </Caption>
-                    <FlexItem>
-                    {actions}
-                    </FlexItem>
-                </Flex>
-              </Card>
-            )
-          }
           <Table
               className={`${loading ? "content-loading" : ""}`}
               dark={dark}

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb

@@ -1,15 +1,10 @@
 <%= pb_content_tag do %>
-  <%= pb_rails("table", props: { size: "sm", data_table: true, number_spacing:"tabular", responsive: "none", dark: dark }.merge(object.table_props)) do %>
-    <% if content.present? %>
-      <% content.presence %>
-    <% else %>
-      <%= pb_rails("advanced_table/table_header", props: { column_definitions: object.column_definitions,
-                                                            enable_toggle_expansion: object.enable_toggle_expansion,
-                                                            responsive: object.responsive }) %>
-      <%= pb_rails("advanced_table/table_body", props: { id: object.id,
-                                                         table_data: object.table_data,
-                                                         column_definitions: object.column_definitions,
-                                                         responsive: object.responsive }) %>
-    <% end %>
-  <% end %>
+        <%= pb_rails("table", props: { size: "sm", data_table: true, number_spacing:"tabular", responsive:"none", dark: dark }) do %>
+          <% if content.present? %>
+            <% content.presence %>
+          <% else %>
+            <%= pb_rails("advanced_table/table_header", props: { column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion }) %>
+            <%= pb_rails("advanced_table/table_body", props: { id: object.id, table_data: object.table_data, column_definitions: object.column_definitions }) %>
+          <% end %>
+        <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb

@@ -12,9 +12,7 @@ module Playbook
                                      default: "header"
       prop :responsive, type: Playbook::Props::Enum,
                         values: %w[none scroll],
-                        default: "scroll"
-      prop :table_props, type: Playbook::Props::HashProp,
-                         default: {}
+                        default: "none"
 
       def classname
         generate_classname("pb_advanced_table", responsive_classname, separator: " ")

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination.jsx

@@ -40,7 +40,6 @@ const AdvancedTablePagination = (props) => {
       <AdvancedTable
           columnDefinitions={columnDefinitions}
           pagination
-          responsive="none"
           tableData={PAGINATION_MOCK_DATA}
           {...props}
       />

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination_with_props.jsx

@@ -47,7 +47,6 @@ const AdvancedTablePaginationWithProps = (props) => {
           columnDefinitions={columnDefinitions}
           pagination
           paginationProps={paginationProps}
-          responsive="none"
           tableData={PAGINATION_MOCK_DATA}
           {...props}
       />

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.md

@@ -1,3 +1,3 @@
-`sortControl` is an optional prop that can be used to gain greater control over the sort state of the Advanced Table. Tanstack handles sort itself, however it does provide for a way to handle the state manually if needed. Usecases for this include needing to store the sort state so it persists on page reload, set an initial sort state, etc.
+`sortControl` is an optional prop that can be used to gain greater control over the sort state of the Advanced Table. Tanstack handles sort itself, however it does provide for a way to handle the state manually if needed. Usecases for this include needing to store the sort state so it persists on page reload, set an initial sort state, etc. 
 
-The sort state must be an object with a single key/value pair, with the key being "desc" and the value being a boolean. The default for sort direction is `desc: true`.
+The sort state must be an object with a single key/value pair, with the key being "desc" and the value being a boolean. The default for sort directino is `desc: true`.

data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml

@@ -3,9 +3,7 @@ examples:
   - advanced_table_beta: Default (Required Props)
   - advanced_table_beta_subrow_headers: SubRow Headers
   - advanced_table_collapsible_trail_rails: Collapsible Trail
-  - advanced_table_table_props: Table Props
   - advanced_table_beta_sort: Enable Sorting
-  - advanced_table_responsive: Responsive Tables
   - advanced_table_custom_cell_rails: Custom Components for Cells
   - advanced_table_column_headers: Multi-Header Columns
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
@@ -28,8 +26,3 @@ examples:
   - advanced_table_pagination_with_props: Pagination Props
   - advanced_table_column_headers: Multi-Header Columns
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
-  # - advanced_table_no_subrows: Table with No Subrows
-  - advanced_table_selectable_rows: Selectable Rows
-  - advanced_table_selectable_rows_no_subrows: Selectable Rows (No Subrows)
-  - advanced_table_selectable_rows_actions: Selectable Rows (With Actions)
-  - advanced_table_selectable_rows_header: Selectable Rows (No Actions Bar)

data/app/pb_kits/playbook/pb_advanced_table/docs/index.js

@@ -13,9 +13,4 @@ export { default as AdvancedTableCustomCell } from './_advanced_table_custom_cel
 export { default as AdvancedTablePagination } from './_advanced_table_pagination.jsx'
 export { default as AdvancedTablePaginationWithProps } from './_advanced_table_pagination_with_props.jsx'
 export { default as AdvancedTableColumnHeaders } from './_advanced_table_column_headers.jsx'
-export { default as AdvancedTableColumnHeadersMultiple } from './_advanced_table_column_headers_multiple.jsx'
-export { default as AdvancedTableSelectableRows } from './_advanced_table_selectable_rows.jsx'
-export { default as AdvancedTableSelectableRowsNoSubrows } from './_advanced_table_selectable_rows_no_subrows.jsx'
-export { default as AdvancedTableNoSubrows } from './_advanced_table_no_subrows.jsx'
-export { default as AdvancedTableSelectableRowsHeader } from './_advanced_table_selectable_rows_header.jsx'
-export { default as AdvancedTableSelectableRowsActions } from './_advanced_table_selectable_rows_actions.jsx'
+export { default as AdvancedTableColumnHeadersMultiple } from './_advanced_table_column_headers_multiple.jsx'

data/app/pb_kits/playbook/pb_advanced_table/table_body.rb

@@ -16,9 +16,6 @@ module Playbook
                             default: []
       prop :collapsible_trail, type: Playbook::Props::Boolean,
                                default: true
-      prop :responsive, type: Playbook::Props::Enum,
-                        values: %w[none scroll],
-                        default: "scroll"
 
       def flatten_columns(columns)
         columns.flat_map do |col|
@@ -49,12 +46,12 @@ module Playbook
           row_parent: "#{id}_#{ancestor_ids.last}",
         }
         # Subrow header if applicable
-        output << pb_rails("advanced_table/table_subrow_header", props: { row: row, column_definitions: leaf_columns, depth: current_depth, subrow_header: subrow_headers[current_depth - 1], collapsible_trail: collapsible_trail, classname: "toggle-content", responsive: responsive, subrow_data_attributes: subrow_data_attributes }) if is_first_child_of_subrow && enable_toggle_expansion == "all"
+        output << pb_rails("advanced_table/table_subrow_header", props: { row: row, column_definitions: leaf_columns, depth: current_depth, subrow_header: subrow_headers[current_depth - 1], collapsible_trail: collapsible_trail, classname: "toggle-content", subrow_data_attributes: subrow_data_attributes }) if is_first_child_of_subrow && enable_toggle_expansion == "all"
 
         current_data_attributes = current_depth.zero? ? { row_depth: 0 } : table_data_attributes
 
         # Additional class and data attributes needed for toggle logic
-        output << pb_rails("advanced_table/table_row", props: { id: id, row: row, column_definitions: leaf_columns, depth: current_depth, collapsible_trail: collapsible_trail, classname: additional_classes, table_data_attributes: current_data_attributes, responsive: responsive })
+        output << pb_rails("advanced_table/table_row", props: { id: id, row: row, column_definitions: leaf_columns, depth: current_depth, collapsible_trail: collapsible_trail, classname: additional_classes, table_data_attributes: current_data_attributes })
 
         if row[:children].present?
           row[:children].each do |child_row|
@@ -77,16 +74,7 @@ module Playbook
       end
 
       def classname
-        additional_classes = []
-        additional_classes << "advanced-table-responsive-#{responsive} pinned-left" if responsive == "scroll"
-
-        generate_classname("pb_advanced_table_body", *additional_classes, separator: " ")
-      end
-
-      def pinned_cell_class(index)
-        return "pinned-left" if index.zero? && responsive == "scroll"
-
-        ""
+        generate_classname("pb_advanced_table_body", separator: " ")
       end
 
     private

data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb

@@ -3,17 +3,17 @@
     <%= pb_rails("table/table_row") do %>
       <% header_row.each_with_index do |cell, cell_index| %>
         <% header_id = cell[:accessor].present? ? cell[:accessor] : "header_#{row_index}_#{cell_index}" %>
-        <%= pb_rails("table/table_header", props: { id: header_id, colspan: cell[:colspan], classname: [object.th_classname(is_first_column: cell_index.zero?), ('last-header-cell' if cell[:is_last_in_group] && cell_index != 0)].compact.join(' '), sort_menu: cell[:accessor] ? cell[:sort_menu] : nil }) do %>
-          <%= pb_rails("flex", props: { align: "center", justify: cell_index.zero? ? "start" : row_index === header_rows.size - 1 ? "end" : "center", text_align: "end" }) do %>
-            <% if cell_index.zero? && (object.enable_toggle_expansion == "header" || object.enable_toggle_expansion == "all") && row_index === header_rows.size - 1 %>
-              <button
-                class="gray-icon toggle-all-icon"
-                onclick="expandAllRows(this); event.preventDefault();">
-                <%= pb_rails("icon", props: { icon: "arrows-from-line", cursor: "pointer", fixed_width: true, padding_right: "xs" }) %>
-              </button>
-            <% end %>
-            <%= cell[:label] %>
-          <% end %>
+        <%= pb_rails("table/table_header", props: { id: header_id, colspan: cell[:colspan], classname: [object.th_classname, ('last-header-cell' if cell[:is_last_in_group] && cell_index != 0)].compact.join(' '), sort_menu: cell[:accessor] ? cell[:sort_menu] : nil }) do %>
+                <%= pb_rails("flex", props:{ align: "center", justify: cell_index.zero? ? "start" : row_index === header_rows.size - 1 ? "end" : "center", text_align: "end" }) do %>
+                    <% if cell_index.zero? && (object.enable_toggle_expansion == "header" || object.enable_toggle_expansion == "all") && row_index === header_rows.size - 1 %>
+                        <button
+                            class="gray-icon toggle-all-icon"
+                            onclick="expandAllRows(this); event.preventDefault();">
+                            <%= pb_rails("icon", props: { icon: "arrows-from-line", cursor: "pointer", fixed_width: true, padding_right: "xs" }) %>
+                        </button>
+                    <% end %>
+                    <%= cell[:label] %>
+                <% end %>
         <% end %>
       <% end %>
     <% end %>