playbook_ui 15.3.0.pre.alpha.play262912095 → 15.3.0.pre.rc.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1421a383b2bc47999a9d91bd809be646df02ba56985ea34c30c1a86a91a0b778
-  data.tar.gz: eb79f292c2cccef9214abc3ff25b40cd3d77f6045230ac74717179584c917dcf
+  metadata.gz: 923e49d3ee86d5e4c40329476d18f0ddf6624341de26ff6bfb459b47511b6e7b
+  data.tar.gz: '087cf99671b19f164e1051dc1ec762e67e85307eda369df19c49b0d270b19ea0'
 SHA512:
-  metadata.gz: ff3c9ce78d4d2364931c6213568080685aba5c15cc7365badd40e1a712a30fa9e6195c9ead12462bd3c9659b65eff7b418d02490052baede10ad673c6dba1ef4
-  data.tar.gz: f95f7db7d8d7682079a05e6e66de4bf0e025eb7e3d4df6dc2158896fd5f49881604721be7a0bb6c33dd0cb28a6cbc88a60e22a82e997fc6d80cbb337ab7d0a76
+  metadata.gz: bf78055ba2a71ad2e53506ededf079046677b6d50df2cd94d7bc7ac9150a5b643c9fc8415f755009eb99d8dd2375f82ecbd1847a039111854ad0fa7b4fc819f3
+  data.tar.gz: 76c1afb64e8a7afc52298a617106c118507c0b88639a0333b78963a66b6abc0f9f1d6434d46fdae13b3c1ae3be76462bbd78addd104fd0ec38ac3a5898b1894c

data/app/pb_kits/playbook/_playbook.scss

@@ -1,4 +1,6 @@
 
+
+
 @import 'pb_advanced_table/advanced_table';
 @import 'pb_avatar/avatar';
 @import 'pb_background/background';
@@ -31,7 +33,6 @@
 @import 'pb_distribution_bar/distribution_bar';
 @import 'pb_draggable/draggable';
 @import 'pb_dropdown/dropdown';
-@import 'pb_empty_state/empty_state';
 @import 'pb_file_upload/file_upload';
 @import 'pb_filter/filter';
 @import 'pb_fixed_confirmation_toast/fixed_confirmation_toast';
@@ -69,10 +70,6 @@
 @import 'pb_overlay/overlay';
 @import 'pb_pagination/pagination';
 @import 'pb_passphrase/passphrase';
-@import 'pb_pb_bar_graph/pb_bar_graph';
-@import 'pb_pb_circle_chart/pb_circle_chart';
-@import 'pb_pb_gauge_chart/pb_gauge_chart';
-@import 'pb_pb_line_graph/pb_line_graph';
 @import 'pb_person/person';
 @import 'pb_person_contact/person_contact';
 @import 'pb_phone_number_input/phone_number_input';
@@ -111,6 +108,9 @@
 @import 'pb_user/user';
 @import 'pb_user_badge/user_badge';
 @import 'pb_weekday_stacked/weekday_stacked';
+@import 'pb_empty_state/empty_state';
+@import 'pb_pb_bar_graph/pb_bar_graph';
+@import 'pb_pb_circle_chart/pb_circle_chart';
 @import 'utilities/mixins';
 @import 'utilities/spacing';
 @import 'utilities/cursor';

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

@@ -66,7 +66,6 @@ const TableCellRenderer = ({
         // Find the “owning” colDefinition by accessor. Needed for multi column logic
         const colDef = findColumnDefByAccessor(columnDefinitions ?? [], column.id)
         const cellAlignment = colDef?.columnStyling?.cellAlignment ?? "right"
-        const cellFontColor = colDef?.columnStyling?.fontColor
         const paddingValue = colDef?.columnStyling?.cellPadding ?? customRowStyle?.cellPadding
         const paddingClass = paddingValue ? `p_${paddingValue}` : undefined
 
@@ -89,7 +88,7 @@ const TableCellRenderer = ({
                     : `${column.getStart("left")}px`
                   : undefined,
                   backgroundColor: i === 0 && customRowStyle?.backgroundColor,
-                  color: cellFontColor || customRowStyle?.fontColor,
+                  color: customRowStyle?.fontColor,
             }}
           >
             {collapsibleTrail && i === 0 && row.depth > 0 && renderCollapsibleTrail(row.depth)}

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

@@ -30,7 +30,6 @@ type TableHeaderCellProps = {
   headerChildren?: React.ReactNode | React.ReactNode[]
   isPinnedLeft?: boolean
   loading?: boolean
-  persistToggleExpansionButton?: boolean
   sortIcon?: string | string[]
   table?: Table<GenericObject>
 } & GlobalProps
@@ -59,7 +58,6 @@ export const TableHeaderCell = ({
     selectableRows,
     hasAnySubRows,
     showActionsBar,
-    persistToggleExpansionButton,
     stickyLeftColumn,
     inlineRowLoading,
     isActionBarVisible,
@@ -222,7 +220,7 @@ const isToggleExpansionEnabled =
               />
             )
           }
-          {isToggleExpansionEnabled &&  ((hasAnySubRows) || (inlineRowLoading && persistToggleExpansionButton)) && !expandByDepth && (
+          {isToggleExpansionEnabled && hasAnySubRows && !expandByDepth && (
               <ToggleIconButton onClick={handleExpandOrCollapse} />
             )}
           {isToggleExpansionEnabled && hasAnySubRows && expandByDepth && (

data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableActions.ts

@@ -9,9 +9,6 @@ interface UseTableActionsProps {
   setExpanded: (expanded: GenericObject) => void;
   onToggleExpansionClick?: (arg: Row<GenericObject>) => void;
   onRowSelectionChange?: (rowSelection: any) => void;
-  inlineRowLoading?: boolean;
-  localPagination?: { pageIndex: number; pageSize: number };
-  setLocalPagination?: (pagination: { pageIndex: number; pageSize: number }) => void;
 }
 
 export function useTableActions({
@@ -19,10 +16,7 @@ export function useTableActions({
   expanded,
   setExpanded,
   onToggleExpansionClick,
-  onRowSelectionChange,
-  inlineRowLoading = false,
-  localPagination,
-  setLocalPagination
+  onRowSelectionChange
 }: UseTableActionsProps) {
 
   // State to achieve 1 second delay before fetching more rows
@@ -44,17 +38,8 @@ export function useTableActions({
 
   // Handle pagination
   const onPageChange = useCallback((page: number) => {
-    if (inlineRowLoading && setLocalPagination && localPagination) {
-      // Use manual pagination state for inlineRowLoading
-      setLocalPagination({
-        ...localPagination,
-        pageIndex: page - 1
-      });
-    } else {
-      // Use tanstack's built-in pagination
-      table.setPageIndex(page - 1);
-    }
-  }, [table, inlineRowLoading, setLocalPagination, localPagination]);
+    table.setPageIndex(page - 1);
+  }, [table]);
 
   // Handle scroll detection for infinite scroll/virtualization
   const fetchMoreOnBottomReached = useCallback((

data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts

@@ -35,7 +35,6 @@ interface UseTableStateProps {
   onRowSelectionChange?: (arg: RowSelectionState) => void;
   columnVisibilityControl?: GenericObject;
   rowStyling?: GenericObject;
-  inlineRowLoading?: boolean;
 }
 
 export function useTableState({
@@ -54,8 +53,7 @@ export function useTableState({
   tableOptions,
   columnVisibilityControl,
   pinnedRows,
-  rowStyling,
-  inlineRowLoading = false
+  rowStyling
 }: UseTableStateProps) {
 
   // Create a local state for expanded and setExpanded if expandedControl not used
@@ -66,12 +64,6 @@ export function useTableState({
   const [localRowPinning, setLocalRowPinning] = useState<RowPinningState>({
     top: [],
   });
-  // Manage local state to preserve current page index when inlineRowLoading is enabled so it does not boot table to page 1
-  // We can extend this for more usecases, but for now scoping it only for inlineRowLoading
-  const [localPagination, setLocalPagination] = useState({
-    pageIndex: paginationProps?.pageIndex ?? 0, 
-    pageSize: paginationProps?.pageSize ?? 20,
-  });
   // Determine whether to use the prop or the local state
   const expanded = expandedControl ? expandedControl.value : localExpanded;
   const setExpanded = expandedControl ? expandedControl.onChange : setLocalExpanded;
@@ -141,7 +133,6 @@ export function useTableState({
       ...(selectableRows  && { rowSelection }),
       ...(columnVisibility && { columnVisibility }),
       ...(pinnedRows && { rowPinning }),
-      ...(inlineRowLoading && { pagination: localPagination }),
     },
   }), [
     expanded,
@@ -151,36 +142,23 @@ export function useTableState({
     rowSelection,
     columnVisibility,
     rowPinning,
-    inlineRowLoading,
-    localPagination
   ]);
 
   // Pagination configuration
   const paginationInitializer = useMemo(() => {
     if (!pagination) return {};
 
-    if (inlineRowLoading) {
-      // Use manual pagination state when inlineRowLoading is enabled (see https://tanstack.com/table/latest/docs/guide/pagination#client-side-pagination)
-      return {
-        getPaginationRowModel: getPaginationRowModel(),
-        paginateExpandedRows: false,
-        onPaginationChange: setLocalPagination,
-        autoResetPageIndex: false, // This is what prevent auto-reset of page index
-      };
-    } else {
-      // Use normal pagination initialization for non- inlineRowLoading usecases
-      return {
-        getPaginationRowModel: getPaginationRowModel(),
-        paginateExpandedRows: false,
-        initialState: {
-          pagination: {
-            pageIndex: paginationProps?.pageIndex ?? 0,
-            pageSize: paginationProps?.pageSize ?? 20,
-          },
+    return {
+      getPaginationRowModel: getPaginationRowModel(),
+      paginateExpandedRows: false,
+      initialState: {
+        pagination: {
+          pageIndex: paginationProps?.pageIndex ?? 0,
+          pageSize: paginationProps?.pageSize ?? 20,
         },
-      };
-    }
-  }, [pagination, paginationProps, inlineRowLoading]);
+      },
+    };
+  }, [pagination, paginationProps]);
 
   // Initialize the table
   const table = useReactTable({
@@ -228,42 +206,9 @@ export function useTableState({
   // Set pagination state when pagination is enabled
   useEffect(() => {
     if (pagination && paginationProps?.pageSize) {
-      if (inlineRowLoading) {
-        // Update local pagination state for inlineRowLoading
-        setLocalPagination(prev => ({
-          ...prev,
-          pageSize: paginationProps.pageSize
-        }));
-      } else {
-        table.setPageSize(paginationProps.pageSize);
-      }
-    }
-  }, [pagination, paginationProps?.pageSize, table, inlineRowLoading]);
-
-  // Update local pagination when paginationProps change and inlineRowLoading is enabled
-  useEffect(() => {
-    if (pagination && inlineRowLoading && paginationProps) {
-      setLocalPagination({
-        pageIndex: paginationProps.pageIndex ?? localPagination.pageIndex,
-        pageSize: paginationProps.pageSize ?? localPagination.pageSize,
-      });
-    }
-  }, [pagination, inlineRowLoading, paginationProps?.pageIndex, paginationProps?.pageSize]);
-
-  // Call the callback with the new page index when localPagination.pageIndex changes (with inlineRowLoading)
-  useEffect(() => {
-    if (pagination && inlineRowLoading && paginationProps?.onPageChange) {
-      paginationProps.onPageChange(localPagination.pageIndex);
-    }
-  }, [localPagination.pageIndex, pagination, inlineRowLoading, paginationProps]);
-
-  // Call the callback with the new page index when localPagination.pageIndex changes (without inlineRowLoading)
-  useEffect(() => {
-    if (pagination && !inlineRowLoading && paginationProps?.onPageChange) {
-      const currentPageIndex = table.getState().pagination.pageIndex;
-      paginationProps.onPageChange(currentPageIndex);
+      table.setPageSize(paginationProps.pageSize);
     }
-  }, [table.getState().pagination.pageIndex, pagination, inlineRowLoading, paginationProps]);
+  }, [pagination, paginationProps?.pageSize, table]);
 
   // Check if table has any sub-rows
   const hasAnySubRows = table.getRowModel().rows.some(row => row.subRows && row.subRows.length > 0);
@@ -302,8 +247,6 @@ export function useTableState({
     rowSelection,
     fullData,
     totalFetched,
-    isFetching,
-    localPagination,
-    setLocalPagination
+    isFetching
   };
 }

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

@@ -39,7 +39,6 @@ export const TableHeader = ({
     hasAnySubRows,
     showActionsBar,
     selectableRows,
-    persistToggleExpansionButton,
     responsive,
     headerRef,
     virtualizedRows,
@@ -93,7 +92,6 @@ export const TableHeader = ({
                   isPinnedLeft={isPinnedLeft}
                   key={`${header.id}-header`}
                   loading={loading}
-                  persistToggleExpansionButton={persistToggleExpansionButton}
                   sortIcon={sortIcon}
                   table={table}
               />
@@ -138,7 +136,6 @@ export const TableHeader = ({
                   isVirtualized
                   key={`${header.id}-header-virtualized`}
                   loading={loading}
-                  persistToggleExpansionButton={persistToggleExpansionButton}
                   sortIcon={sortIcon}
                   table={table}
               />

data/app/pb_kits/playbook/pb_advanced_table/Utilities/RowUtils.ts

@@ -17,7 +17,7 @@ export const getRowColorClass = (
     (inlineRowLoading && (rowHasNoChildren || row.getCanExpand()))
   );
 
-  return row.getIsSelected() ? "bg-row-selection" : shouldShowExpandedBackground ? "bg-silver" : "pb-bg-row-white";
+  return row.getIsSelected() ? "bg-row-selection" : shouldShowExpandedBackground ? "bg-silver" : "bg-white";
 }
 
 /**

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

@@ -51,7 +51,7 @@
     background-color: lighten($silver, $opacity_7);
   }
 
-  .pb-bg-row-white {
+  .bg-white {
     background-color: $white;
   }
 
@@ -278,7 +278,7 @@
         }
       }
 
-      &.pb-bg-row-white {
+      &.bg-white {
         td:first-child {
           background-color: $white;
         }
@@ -756,7 +756,7 @@
       border-bottom-color: $border_dark !important;
     }
 
-    .pb-bg-row-white {
+    .bg-white {
       background: $bg_dark_card;
     }
 
@@ -766,7 +766,7 @@
 
     // Dark mode virtualized rows
     .virtualized-table-row {
-      &.pb-bg-row-white {
+      &.bg-white {
         background: $bg_dark_card !important;
 
         td:first-child {

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

@@ -63,7 +63,6 @@ type AdvancedTableProps = {
   scrollBarNone?: boolean,
   selectableRows?: boolean,
   showActionsBar?: boolean,
-  persistToggleExpansionButton?: boolean,
   sortControl?: GenericObject
   tableData: GenericObject[]
   tableOptions?: GenericObject
@@ -110,7 +109,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     scrollBarNone= false,
     showActionsBar = true,
     selectableRows,
-    persistToggleExpansionButton = false,
     sortControl,
     stickyLeftColumn,
     tableData,
@@ -136,9 +134,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     updateLoadingStateRowCount,
     fullData,
     totalFetched,
-    isFetching,
-    localPagination,
-    setLocalPagination
+    isFetching
   } = useTableState({
     tableData,
     columnDefinitions,
@@ -156,8 +152,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     onRowSelectionChange,
     columnVisibilityControl,
     pinnedRows,
-    rowStyling,
-    inlineRowLoading
+    rowStyling
   });
 
   // Initialize table actions
@@ -170,10 +165,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     expanded,
     setExpanded,
     onToggleExpansionClick,
-    onRowSelectionChange,
-    inlineRowLoading,
-    localPagination,
-    setLocalPagination
+    onRowSelectionChange
   });
 
   // Set table row count for loading state
@@ -357,7 +349,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             loading={loading}
             onCustomSortClick={onCustomSortClick}
             onExpandByDepthClick={onExpandByDepthClick}
-            persistToggleExpansionButton={persistToggleExpansionButton}
             pinnedRows={pinnedRows}
             responsive={responsive}
             rowStyling={rowStyling}

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

@@ -11,8 +11,8 @@
     <% if content.present? %>
       <% content.presence %>
     <% else %>
-      <%= pb_rails("advanced_table/table_header", props: { table_id: object.id, column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, show_actions_bar: object.show_actions_bar }) %>
-      <%= pb_rails("advanced_table/table_body", props: { table_id: object.id, table_data: object.table_data, column_definitions: object.column_definitions, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, enable_toggle_expansion: object.enable_toggle_expansion, row_styling: object.row_styling }) %>
+      <%= pb_rails("advanced_table/table_header", props: { id: object.id, column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, show_actions_bar: object.show_actions_bar }) %>
+      <%= 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, selectable_rows: object.selectable_rows, enable_toggle_expansion: object.enable_toggle_expansion, row_styling: object.row_styling }) %>
     <% end %>
   <% end %>
 <% end %>

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

@@ -108,48 +108,6 @@ const MOCK_DATA_WITH_ID = [
   },
 ]
 
-const MOCK_DATA_NO_SUBROWS = [
-  {
-    year: "2021",
-    quarter: null,
-    month: null,
-    day: null,
-    newEnrollments: "20",
-    scheduledMeetings: "10",
-    attendanceRate: "51%",
-    completedClasses: "3",
-    classCompletionRate: "33%",
-    graduatedStudents: "19",
-    children: [],
-  },
-  {
-    year: "2022",
-    quarter: null,
-    month: null,
-    day: null,
-    newEnrollments: "25",
-    scheduledMeetings: "17",
-    attendanceRate: "75%",
-    completedClasses: "5",
-    classCompletionRate: "45%",
-    graduatedStudents: "32",
-    children: [],
-  },
-  {
-    year: "2023",
-    quarter: null,
-    month: null,
-    day: null,
-    newEnrollments: "30",
-    scheduledMeetings: "22",
-    attendanceRate: "80%",
-    completedClasses: "7",
-    classCompletionRate: "55%",
-    graduatedStudents: "45",
-    children: [],
-  },
-]
-
 const columnDefinitions = [
   {
     accessor: "year",
@@ -308,10 +266,10 @@ test("Row toggle button exists and toggles subrows open and closed", () => {
   const kit = screen.getByTestId(testId)
   const rowButton = kit.querySelector(".gray-icon.expand-toggle-icon")
   expect(rowButton).toBeInTheDocument()
-  const subRow1 = kit.querySelector(".pb-bg-row-white.depth-sub-row-1")
+  const subRow1 = kit.querySelector(".bg-white.depth-sub-row-1")
   expect(subRow1).not.toBeInTheDocument()
   rowButton.click()
-  const subRow = kit.querySelector(".pb-bg-row-white.depth-sub-row-1")
+  const subRow = kit.querySelector(".bg-white.depth-sub-row-1")
   expect(subRow).toBeInTheDocument()
 })
 
@@ -328,13 +286,13 @@ test("toggleExpansionAll button exists and toggles subrows open and closed", asy
   const toggleButton = kit.querySelector(".gray-icon.toggle-all-icon");
   expect(toggleButton).toBeInTheDocument();
 
-  const subRow1 = kit.querySelector(".pb-bg-row-white.depth-sub-row-1");
+  const subRow1 = kit.querySelector(".bg-white.depth-sub-row-1");
   expect(subRow1).not.toBeInTheDocument();
 
   toggleButton.click();
 
   await waitFor(() => {
-    const subRow = kit.querySelector(".pb-bg-row-white.depth-sub-row-1");
+    const subRow = kit.querySelector(".bg-white.depth-sub-row-1");
     expect(subRow).toBeInTheDocument();
   })
 })
@@ -385,7 +343,7 @@ test("expandControl prop works as expected", () => {
   render (<AdvancedTableExpandControl/>)
 
   const kit = screen.getByTestId(testId)
-  const subRow = kit.querySelector(".pb-bg-row-white.depth-sub-row-1")
+  const subRow = kit.querySelector(".bg-white.depth-sub-row-1")
   expect(subRow).toBeInTheDocument()
 })
 
@@ -551,23 +509,6 @@ test("inlineRowLoading prop renders inline loading if true", () => {
   expect(inlineLoading).toBeInTheDocument()
 })
 
-test("persistToggleExpansionButton prop shows header toggle when inlineRowLoading is true", () => {
-  render(
-    <AdvancedTable
-        columnDefinitions={columnDefinitions}
-        data={{ testid: testId }}
-        enableToggleExpansion="all"
-        inlineRowLoading
-        persistToggleExpansionButton
-        tableData={MOCK_DATA_NO_SUBROWS}
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  const headerToggleButton = kit.querySelector(".gray-icon.toggle-all-icon")
-  expect(headerToggleButton).toBeInTheDocument()
-})
-
 test("responsive prop functions as expected", () => {
   render(
     <AdvancedTable
@@ -740,69 +681,6 @@ test("columnStyling.cellPadding sets cell padding", () => {
   expect(firstEnrollmentCell).toHaveClass('p_none')
 });
 
-test("columnStyling.fontColor sets cell font color", () => {
-  const styledColumnDefs = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-      columnStyling: { fontColor: colors.category_1 },
-    },
-    {
-      accessor: "scheduledMeetings",
-      label: "Scheduled Meetings",
-    },
-  ];
-
-  render(
-    <AdvancedTable
-        columnDefinitions={styledColumnDefs}
-        data={{ testid: testId }}
-        tableData={MOCK_DATA}
-    />
-  );
-
-  const firstEnrollmentCell = screen.getAllByText("20")[0].closest("td");
-  expect(firstEnrollmentCell).toHaveStyle({ color: colors.category_1 });
-});
-
-test("columnStyling.fontColor works with background color", () => {
-  const styledColumnDefs = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-      columnStyling: { 
-        cellBackgroundColor: (row) => row.newEnrollments > 20 ? "success_secondary" : "warning_secondary",
-        fontColor: colors.white 
-      },
-    },
-    {
-      accessor: "scheduledMeetings",
-      label: "Scheduled Meetings",
-    },
-  ];
-
-  render(
-    <AdvancedTable
-        columnDefinitions={styledColumnDefs}
-        data={{ testid: testId }}
-        tableData={MOCK_DATA}
-    />
-  );
-
-  const firstEnrollmentCell = screen.getAllByText("20")[0].closest("td");
-  expect(firstEnrollmentCell).toHaveStyle({ color: colors.white });
-});
-
 test("renders virtualized table rows and header", () => {
   render(
     <AdvancedTable

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

@@ -2,9 +2,7 @@ The AdvancedTable kit accepts tree data and automatically renders expansion cont
 
 ### id
 
-A unique `id` is required to allow the table functionality to work properly. Without it, certain functions like the action bar, expand/collapse caching, or selectable rows will not be able to properly reference the correct table.
-
-You must also set `table_id` when using subcomponents like `table_header` or `table_body`.
+A unique `id` is required to allow the table functionality to work properly. Without it, certain functions like the action bar will not be able to properly reference the correct table.
 
 ### table_data
 

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

@@ -51,7 +51,7 @@
   ]
 %>
 
-<%= pb_rails("advanced_table", props: { id: "sort", table_data: @table_data, column_definitions: column_definitions, id: "beta_sort" }) do %>
-  <%= pb_rails("advanced_table/table_header", props: { table_id: "sort", column_definitions: column_definitions }) %>
-  <%= pb_rails("advanced_table/table_body", props: { table_id: "sort", table_data: @table_data, column_definitions: column_definitions, enable_toggle_expansion: "all" }) %>
+<%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions, id: "beta_sort" }) do %>
+  <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { id: "beta_sort", table_data: @table_data, column_definitions: column_definitions, enable_toggle_expansion: "all" }) %>
 <% end %>

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

@@ -34,7 +34,7 @@
   subrow_headers = ["Quarter", "Month", "Day"]
 %>
 
-<%= pb_rails("advanced_table", props: { id: "subrow-headers", table_data: @table_data, column_definitions: column_definitions, id: "test_table" }) do %>
-  <%= pb_rails("advanced_table/table_header", props: { table_id: "subrow-headers", column_definitions: column_definitions }) %>
-  <%= pb_rails("advanced_table/table_body", props: { table_id: "subrow-headers", table_data: @table_data, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all" }) %>
+<%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions, id: "test_table" }) do %>
+  <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { id: "test_table", table_data: @table_data, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all" }) %>
 <% end %>

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

@@ -31,6 +31,6 @@
 ] %>
 
 <%= pb_rails("advanced_table", props: { id: "collapsible_trail", table_data: @table_data, column_definitions: column_definitions }) do %>
-  <%= pb_rails("advanced_table/table_header", props: { table_id: "collapsible_trail", column_definitions: column_definitions }) %>
-  <%= pb_rails("advanced_table/table_body", props: { table_id: "collapsible_trail", table_data: @table_data, column_definitions: column_definitions, collapsible_trail: false }) %>
+  <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_data: @table_data, column_definitions: column_definitions, collapsible_trail: false }) %>
 <% end %>

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

@@ -1,3 +1,3 @@
 The borders of column groups can be set to a different color using the `columnGroupBorderColor` prop.  In order for these borders to be visible, this prop must be used with `tableProps` and `verticalBorder` set to true.
 
-The available colors for the border are Playbook's Text Colors, which can be found [here](https://playbook.powerapp.cloud/tokens/colors).
+The available colors for the border are Playbook's Text Colors, which can be found [here](https://playbook.powerapp.cloud/visual_guidelines/colors).

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

@@ -1,3 +1,3 @@
 The borders of column groups can be set to a different color using the `column_group_border_color` prop. In order for these borders to be visible, this prop must be used with `table_props` and `vertical_border` set to true.
 
-The available colors for the border are Playbook's Text Colors, which can be found [here](https://playbook.powerapp.cloud/tokens/colors).
+The available colors for the border are Playbook's Text Colors, which can be found [here](https://playbook.powerapp.cloud/visual_guidelines/colors).

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

@@ -1,8 +1,7 @@
 import React from "react"
-import { AdvancedTable, colors } from "playbook-ui"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
-
 const AdvancedTableColumnStyling = (props) => {
   const columnDefinitions = [
     {
@@ -35,7 +34,6 @@ const AdvancedTableColumnStyling = (props) => {
     {
       accessor: "graduatedStudents",
       label: "Graduated Students",
-      columnStyling:{fontColor: colors.data_8},
     },
   ]