playbook_ui 14.11.1 → 14.12.0.pre.alpha.PBNTR456fixedconftoastrailsautoclose5728

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 684dfcc3e0b2d271c0ef3992c66895d5bf59f7814908e97b4ba0a6a2fd3a35c6
-  data.tar.gz: 8cff029a4d16a46c0d11292767c7faed0fed272b1102316c5c6988289b145f9b
+  metadata.gz: 443f924259452e15c0bb8bc2ea0d94645d77fa9b42fb76564d273f42f42db997
+  data.tar.gz: 354744c87e2be85504715e8b1c695754f99ce6a2776b4c738a5e2f1408a4c5d1
 SHA512:
-  metadata.gz: cf605e9ea95eca375c9efc8a112416d373958b9c5b0cd2bb4ea63495a6e6a97e22776d372d96894d2060c0c2c02ee671943390b06dbf0b35dded14de3b531a09
-  data.tar.gz: 8c2b6329d1a8ed96313eb9cacae23f86c2801ebdf4fe24de3070b969b79758753ca5f7e2507956482e4560fac781f6dc443f55cf0844ea749f2e7dcd26b1c92e
+  metadata.gz: af9311e0d5f5a9f5ee66ea6483baca4152dfcadb4903ec31120b90a4c2b0af51e4621403924979557844fa9db39121bcfebf1775733b4c6475f6edde8ce324e0
+  data.tar.gz: d027b8c7e30f6c2d3a0bcf7cf8dd3910917f6aea83e9a1fb92977dbcda20d05276d1bc89bc52a62a9076036b3ddfed510c5b75e795191d364d7073964232b57b

data/app/pb_kits/playbook/_playbook.scss

@@ -1,3 +1,4 @@
+
 @import 'pb_advanced_table/advanced_table';
 @import 'pb_avatar/avatar';
 @import 'pb_avatar_action_button/avatar_action_button';
@@ -14,6 +15,7 @@
 @import 'pb_circle_chart/circle_chart';
 @import 'pb_circle_icon_button/circle_icon_button';
 @import 'pb_collapsible/collapsible';
+@import 'pb_copy_button/copy_button';
 @import 'pb_contact/contact';
 @import 'pb_currency/currency';
 @import 'pb_dashboard_value/dashboard_value';
@@ -108,6 +110,7 @@
 @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,6 +8,7 @@ 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"
 
@@ -17,6 +18,7 @@ interface CustomCellProps {
   row: Row<GenericObject>
   value?: string
   customRenderer?: (row: Row<GenericObject>, value: string | undefined) => React.ReactNode
+  selectableRows?: boolean
 } 
 
 export const CustomCell = ({
@@ -25,8 +27,9 @@ export const CustomCell = ({
   row,
   value,
   customRenderer,
+  selectableRows,
 }: CustomCellProps & GlobalProps) => {
-  const { setExpanded, expanded, expandedControl, inlineRowLoading } = useContext(AdvancedTableContext);
+  const { setExpanded, expanded, expandedControl, inlineRowLoading, hasAnySubRows } = useContext(AdvancedTableContext);
 
   const handleOnExpand = (row: Row<GenericObject>) => {
     onRowToggleClick && onRowToggleClick(row);
@@ -41,10 +44,23 @@ export const CustomCell = ({
 
   return (
     <div style={{ paddingLeft: `${row.depth * 1.25}em` }}>
-      <Flex alignItems="center" 
+      <Flex 
+          alignItems="center" 
           columnGap="xs"
+          justify={!hasAnySubRows && !inlineRowLoading ? "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,12 +1,13 @@
 import React, { useContext } from "react"
 import classnames from "classnames"
-import { flexRender, Header } from "@tanstack/react-table"
+import { flexRender, Header, Table } 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"
@@ -24,6 +25,7 @@ type TableHeaderCellProps = {
   isPinnedLeft?: boolean
   loading?: boolean
   sortIcon?: string | string[]
+  table?: Table<GenericObject>
 } & GlobalProps
 
 export const TableHeaderCell = ({
@@ -35,9 +37,13 @@ export const TableHeaderCell = ({
   isPinnedLeft = false,
   loading,
   sortIcon,
+  table
 }: TableHeaderCellProps) => {
-  const { sortControl, responsive } = useContext(AdvancedTableContext)
+  const { sortControl, responsive, selectableRows, hasAnySubRows, showActionsBar, inlineRowLoading } =
+    useContext(AdvancedTableContext);
 
+  type justifyTypes = "none" | "center" | "start" | "end" | "between" | "around" | "evenly"
+  
   const toggleSortButton = (event: React.SyntheticEvent) => {
     if (sortControl) {
       const sortIsDesc = header?.column.getIsSorted() === "desc"
@@ -59,6 +65,7 @@ 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 },
@@ -82,8 +89,14 @@ const isToggleExpansionEnabled =
   (enableToggleExpansion === "all" || "header") &&
   enableToggleExpansion !== "none"
 
-const justifyHeader = isLeafColumn ? "end" : "center"
+  let justifyHeader:justifyTypes;
 
+  if (header?.index === 0 && hasAnySubRows || (header?.index === 0 && inlineRowLoading)) {
+    justifyHeader = enableSorting ? "between" : "start";
+  } else {
+    justifyHeader = isLeafColumn ? "end" : "center";
+  }
+  
   return (
     <th
         align="right"
@@ -102,9 +115,18 @@ const justifyHeader = isLeafColumn ? "end" : "center"
       ) : (
         <Flex
             alignItems="center"
-            justify={header?.index === 0 && enableSorting ? "between" : header?.index === 0 && !enableSorting ? "start" : justifyHeader}
+            justify={justifyHeader}
         >
-          {isToggleExpansionEnabled && (
+          {
+            selectableRows && header?.index === 0 && hasAnySubRows && (
+              <Checkbox
+                  checked={table?.getIsAllRowsSelected()}
+                  indeterminate={table?.getIsSomeRowsSelected()}
+                  onChange={table?.getToggleAllRowsSelectedHandler()}
+              />
+            )
+          }
+          {isToggleExpansionEnabled && hasAnySubRows && (
               <ToggleIconButton onClick={handleExpandOrCollapse} />
             )}
 

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

@@ -9,6 +9,7 @@ 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"
@@ -42,6 +43,8 @@ export const TableBody = ({
     loading,
     responsive,
     table,
+    selectableRows,
+    hasAnySubRows
   } = useContext(AdvancedTableContext)
 
   const classes = classnames(
@@ -65,7 +68,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 && (
@@ -79,11 +82,23 @@ export const TableBody = ({
                 />
               )}
             <tr
-                className={`${rowBackground ? "bg-silver" : "bg-white"} ${
+                className={`${rowColor} ${
                   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,8 +7,10 @@ import { GenericObject } from "../../types"
 import { buildCss } from "../../utilities/props"
 import { globalProps } from "../../utilities/globalProps"
 
-import { TableHeaderCell } from "../Components/TableHeaderCell"
+import Checkbox from "../../pb_checkbox/_checkbox"
 
+import { TableHeaderCell } from "../Components/TableHeaderCell"
+import { isChrome } from "../Utilities/BrowserCheck"
 import AdvancedTableContext from "../Context/AdvancedTableContext"
 
 type TableHeaderProps = {
@@ -34,6 +36,10 @@ export const TableHeader = ({
     handleExpandOrCollapse,
     loading,
     table,
+    hasAnySubRows,
+    showActionsBar,
+    selectableRows,
+    responsive
   } = useContext(AdvancedTableContext)
 
   const classes = classnames(
@@ -44,6 +50,12 @@ 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}
@@ -52,6 +64,15 @@ 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 (
@@ -65,6 +86,7 @@ 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,10 +23,20 @@
     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;
   }
@@ -47,6 +57,16 @@
     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 {
@@ -59,6 +79,14 @@
     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;
+      }
+    }
   }
 
 
@@ -116,6 +144,7 @@
 
   // 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,12 +12,17 @@ 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"
 
@@ -30,6 +35,7 @@ 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[]
@@ -47,16 +53,20 @@ 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,
@@ -74,11 +84,14 @@ 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(
@@ -96,6 +109,9 @@ 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 = ({
@@ -116,6 +132,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
                     getValue={getValue}
                     onRowToggleClick={onRowToggleClick}
                     row={row}
+                    selectableRows={selectableRows}
                 />
           )
         }
@@ -128,6 +145,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
                 customRenderer={customRenderer}
                 onRowToggleClick={onRowToggleClick}
                 row={row} 
+                selectableRows={selectableRows}
                 value={accessorValue} 
             />
           ) : (
@@ -189,9 +207,13 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     },
   ]
 
-  const expandAndSortState = () => {
-    if (sortControl) {
+  const customState = () => {
+    if (sortControl && selectableRows) {
+      return { state: { expanded, sorting, rowSelection } }
+    } else if (sortControl) {
       return { state: { expanded, sorting } }
+    } else if (selectableRows) {
+      return { state: { expanded, rowSelection } }
     } else {
       return { state: { expanded } }
     }
@@ -219,13 +241,24 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     getSortedRowModel: getSortedRowModel(),
     enableSortingRemoval: false,
     sortDescFirst: true,
-    ...expandAndSortState(),
-    ... paginationInitializer,
+    onRowSelectionChange: setRowSelection,
+    getRowId: selectableRows ? row => row.id : undefined,
+    ...customState(),
+    ...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
@@ -284,6 +317,9 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             sortControl,
             table,
             toggleExpansionIcon,
+            showActionsBar,
+            selectableRows,
+            hasAnySubRows
           }}
       >
         <>
@@ -297,6 +333,27 @@ 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,10 +1,10 @@
 <%= pb_content_tag do %>
-        <%= pb_rails("table", props: { size: "sm", data_table: true, number_spacing:"tabular", responsive:"none", dark: dark }) do %>
+        <%= pb_rails("table", props: { size: "sm", data_table: true, number_spacing:"tabular", responsive:"none", dark: dark, classname: object.loading ? "content-loading" : ""  }.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 }) %>
-            <%= pb_rails("advanced_table/table_body", props: { id: object.id, table_data: object.table_data, column_definitions: object.column_definitions }) %>
+            <%= pb_rails("advanced_table/table_header", props: { column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion, responsive: object.responsive, loading: object.loading }) %>
+            <%= pb_rails("advanced_table/table_body", props: { id: object.id, table_data: object.table_data, column_definitions: object.column_definitions, responsive: object.responsive, loading: object.loading }) %>
           <% end %>
         <% end %>
 <% end %>

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

@@ -10,9 +10,13 @@ module Playbook
       prop :enable_toggle_expansion, type: Playbook::Props::Enum,
                                      values: %w[all header none],
                                      default: "header"
+      prop :loading, type: Playbook::Props::Boolean,
+                     default: false
       prop :responsive, type: Playbook::Props::Enum,
                         values: %w[none scroll],
-                        default: "none"
+                        default: "scroll"
+      prop :table_props, type: Playbook::Props::HashProp,
+                         default: {}
 
       def classname
         generate_classname("pb_advanced_table", responsive_classname, separator: " ")

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx

@@ -245,7 +245,7 @@ test("toggleExpansionAll button exists and toggles subrows open and closed", asy
 })
 
 
-test("loading state + initialLoadingRowCount prop", () => {
+test("loading state + initialLoadingRowsCount prop", () => {
   render(
     <AdvancedTable
         columnDefinitions={columnDefinitions}

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.html.erb

@@ -0,0 +1,33 @@
+<% column_definitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    }
+] %>
+
+<%= pb_rails("advanced_table", props: { id: "beta_table", table_data: @table_data, column_definitions: column_definitions, loading: true }) %>

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

@@ -0,0 +1 @@
+The optional `loading` prop takes a boolean value that can be managed using state. If loading is true, the table will display the loading skeleton and once loading is false, the table will render with the data provided. 

data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_loading.md → _advanced_table_loading_react.md}

@@ -1,3 +1,3 @@
-the optional `loading` prop takes a boolean value that can be managed using state. If loading is true, the table will display the loading skeleton and once loading is false, the table will render with the data provided. 
+The optional `loading` prop takes a boolean value that can be managed using state. If loading is true, the table will display the loading skeleton and once loading is false, the table will render with the data provided. 
 
-By default, the inital row count of the loading skeleton is set to 10. If you want more control over this initial row count, the optional `initialLoadingRowCount` prop can be used to pass in a number. __NOTE__: This is only for the first render of the table, subsequent loading skeleton row count logic is handled within the kit itself.
+By default, the inital row count of the loading skeleton is set to 10. If you want more control over this initial row count, the optional `initialLoadingRowsCount` prop can be used to pass in a number. __NOTE__: This is only for the first render of the table, subsequent loading skeleton row count logic is handled within the kit itself.

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

@@ -0,0 +1,50 @@
+import React from "react"
+import { AdvancedTable } from "playbook-ui"
+import MOCK_DATA from "./advanced_table_mock_data_no_subrows.json"
+
+const AdvancedTableNoSubrows = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    },
+  ]
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          enableToggleExpansion="all"
+          tableData={MOCK_DATA}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AdvancedTableNoSubrows

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

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