playbook_ui 15.2.0.pre.alpha.play2318draggablelistnoborder11263 → 15.2.0.pre.alpha.play257911600

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0564ca2a7aee4679fe5adc368490a297e80b6460e473694b27ffe0ca6d764f9e
-  data.tar.gz: 70197650a76743928f2f013e6e523bb62d409fdfae9c6b8e54981e27d92e4481
+  metadata.gz: 82b794ea7cbc28ff4082856e2145c9ecda9ef63a2c87a8c5921528878df240b6
+  data.tar.gz: 862326ab3cbeff4b250f5c9d0c1161c17f035c22ef8063c9108a716af5cd8b4e
 SHA512:
-  metadata.gz: 65c3a0a9a1a969bd0c99be6b225c28ba833e3c85b1ad9984e55f02c17d7c14972a04ded656e05832a501fc63d70ab16e6a6981901635a5c0a0b0e227e0cdb2b6
-  data.tar.gz: 1108f7297064ec9af16261b51c7f4a458d9963d149903f3449054d5e7e172c193c2d966aebdd83b67551e26a48782506a2cb56d14eaa48e5d1b469e2477723d2
+  metadata.gz: 23986a83c19969cb62ffc2db0b40357c724b4c3881ac557c462497622ccfbb10c1e578188ed074f79f534205db5200435d4e8e5bf8d7bed16d0a0af3585e7cfd
+  data.tar.gz: 455fa08d0de344832426667183e8d808e5dcc8ba3e8353362eb7769bff96c3bebcdd7c0191faeef01944fef2404ee43daf69f546a6949f71ac28fa15b1ec99b6

data/app/pb_kits/playbook/_playbook.scss

@@ -1,6 +1,4 @@
 
-
-
 @import 'pb_advanced_table/advanced_table';
 @import 'pb_avatar/avatar';
 @import 'pb_background/background';
@@ -33,6 +31,7 @@
 @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';
@@ -70,6 +69,10 @@
 @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';
@@ -108,9 +111,6 @@
 @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/Hooks/useTableActions.ts

@@ -9,6 +9,9 @@ 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({
@@ -16,7 +19,10 @@ export function useTableActions({
   expanded,
   setExpanded,
   onToggleExpansionClick,
-  onRowSelectionChange
+  onRowSelectionChange,
+  inlineRowLoading = false,
+  localPagination,
+  setLocalPagination
 }: UseTableActionsProps) {
 
   // State to achieve 1 second delay before fetching more rows
@@ -38,8 +44,17 @@ export function useTableActions({
 
   // Handle pagination
   const onPageChange = useCallback((page: number) => {
-    table.setPageIndex(page - 1);
-  }, [table]);
+    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]);
 
   // Handle scroll detection for infinite scroll/virtualization
   const fetchMoreOnBottomReached = useCallback((

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

@@ -35,6 +35,7 @@ interface UseTableStateProps {
   onRowSelectionChange?: (arg: RowSelectionState) => void;
   columnVisibilityControl?: GenericObject;
   rowStyling?: GenericObject;
+  inlineRowLoading?: boolean;
 }
 
 export function useTableState({
@@ -53,7 +54,8 @@ export function useTableState({
   tableOptions,
   columnVisibilityControl,
   pinnedRows,
-  rowStyling
+  rowStyling,
+  inlineRowLoading = false
 }: UseTableStateProps) {
 
   // Create a local state for expanded and setExpanded if expandedControl not used
@@ -64,6 +66,12 @@ 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;
@@ -133,6 +141,7 @@ export function useTableState({
       ...(selectableRows  && { rowSelection }),
       ...(columnVisibility && { columnVisibility }),
       ...(pinnedRows && { rowPinning }),
+      ...(inlineRowLoading && { pagination: localPagination }),
     },
   }), [
     expanded,
@@ -142,23 +151,36 @@ export function useTableState({
     rowSelection,
     columnVisibility,
     rowPinning,
+    inlineRowLoading,
+    localPagination
   ]);
 
   // Pagination configuration
   const paginationInitializer = useMemo(() => {
     if (!pagination) return {};
 
-    return {
-      getPaginationRowModel: getPaginationRowModel(),
-      paginateExpandedRows: false,
-      initialState: {
-        pagination: {
-          pageIndex: paginationProps?.pageIndex ?? 0,
-          pageSize: paginationProps?.pageSize ?? 20,
+    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,
+          },
         },
-      },
-    };
-  }, [pagination, paginationProps]);
+      };
+    }
+  }, [pagination, paginationProps, inlineRowLoading]);
 
   // Initialize the table
   const table = useReactTable({
@@ -206,9 +228,27 @@ export function useTableState({
   // Set pagination state when pagination is enabled
   useEffect(() => {
     if (pagination && paginationProps?.pageSize) {
-      table.setPageSize(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, paginationProps?.pageSize, table]);
+  }, [pagination, inlineRowLoading, paginationProps?.pageIndex, paginationProps?.pageSize]);
 
   // Check if table has any sub-rows
   const hasAnySubRows = table.getRowModel().rows.some(row => row.subRows && row.subRows.length > 0);
@@ -247,6 +287,8 @@ export function useTableState({
     rowSelection,
     fullData,
     totalFetched,
-    isFetching
+    isFetching,
+    localPagination,
+    setLocalPagination
   };
 }

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

@@ -134,7 +134,9 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     updateLoadingStateRowCount,
     fullData,
     totalFetched,
-    isFetching
+    isFetching,
+    localPagination,
+    setLocalPagination
   } = useTableState({
     tableData,
     columnDefinitions,
@@ -152,7 +154,8 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     onRowSelectionChange,
     columnVisibilityControl,
     pinnedRows,
-    rowStyling
+    rowStyling,
+    inlineRowLoading
   });
 
   // Initialize table actions
@@ -165,7 +168,10 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     expanded,
     setExpanded,
     onToggleExpansionClick,
-    onRowSelectionChange
+    onRowSelectionChange,
+    inlineRowLoading,
+    localPagination,
+    setLocalPagination
   });
 
   // Set table row count for loading state

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: { 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 }) %>
+      <%= 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 }) %>
     <% end %>
   <% end %>
 <% end %>

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

@@ -0,0 +1,39 @@
+<% column_definitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+      column_styling: { 
+        cell_background_color: ->(row) { row[:newEnrollments].to_i > 20 ? "success_secondary" : "warning_secondary" }
+      }
+    },
+    {
+      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: "background-control", table_data: @table_data, column_definitions: column_definitions }) do %>
+  <%= pb_rails("advanced_table/table_header", props: { table_id: "background-control", column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_id: "background-control", table_data: @table_data, column_definitions: column_definitions }) %>
+<% end %>

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

@@ -0,0 +1 @@
+`column_styling` can also be used to control the background color on all cells in a given column via the use of the `cell_background_color` key/value pair. Use `cell_background_color` to achieve custom background colors for individual cells as seen here.

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

@@ -2,7 +2,9 @@ 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 will not be able to properly reference the correct table.
+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`.
 
 ### 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: { 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" }) %>
+<%= 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" }) %>
 <% 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: { 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" }) %>
+<%= 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" }) %>
 <% 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: { column_definitions: column_definitions }) %>
-  <%= pb_rails("advanced_table/table_body", props: { table_data: @table_data, column_definitions: column_definitions, collapsible_trail: false }) %>
+  <%= 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 }) %>
 <% end %>

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

@@ -1,4 +1,4 @@
-The `columnStyling` prop is an optional item that can be used within `columnDefinitions` as shown in the code snippet below. It is an object that has 2 optional key/value pairs:
+The `columnStyling` prop is an optional item that can be used within `columnDefinitions` as shown in the code snippet below. It is an object that has several optional key/value pairs, this doc example highlights the following:
 
 1) `headerAlignment`: This will allow you to control alignment of header content which is set to right aligned by default. you can set this to `left`, `right` or `center`.
 

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

@@ -58,6 +58,6 @@
 ] %>
 
 <%= pb_rails("advanced_table", props: { id: "column-styling-multi", table_data: @table_data, column_definitions: column_definitions }) do %>
-  <%= 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 }) %>
+  <%= pb_rails("advanced_table/table_header", props: { table_id: "column-styling-multi", column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_id: "column-styling-multi", table_data: @table_data, column_definitions: column_definitions }) %>
 <% end %>

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

@@ -33,6 +33,6 @@
 ] %>
 
 <%= pb_rails("advanced_table", props: { id: "column-styling", table_data: @table_data, column_definitions: column_definitions }) do %>
-  <%= 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 }) %>
+  <%= pb_rails("advanced_table/table_header", props: { table_id: "column-styling", column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_id: "column-styling", table_data: @table_data, column_definitions: column_definitions }) %>
 <% end %>

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

@@ -1,4 +1,4 @@
-The `column_styling` prop is an optional item that can be used within `column_definitions` as shown in the code snippet below. It is an object that has 2 optional key/value pairs:
+The `column_styling` prop is an optional item that can be used within `column_definitions` as shown in the code snippet below.  It is an object that has several optional key/value pairs, this doc example highlights the following:
 
 1) `header_alignment`: This will allow you to control alignment of header content which is set to right aligned by default. you can set this to `left`, `right` or `center`.
 

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

@@ -0,0 +1,51 @@
+<% 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",
+    }
+] %>
+
+<% row_styling = [
+  {
+    row_id: "1",
+    cell_padding: "md"
+  },
+  {
+    row_id: "3",
+    cell_padding: "lg"
+  },
+  {
+    row_id: "5",
+    cell_padding: "none"
+  },
+] %>
+
+<%= pb_rails("advanced_table", props: { id: "padding-control-per-row", table_data: @table_data_with_id, column_definitions: column_definitions, row_styling: row_styling }) do %>
+  <%= pb_rails("advanced_table/table_header", props: { table_id: "padding-control-per-row", column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_id: "padding-control-per-row", table_data: @table_data_with_id, column_definitions: column_definitions, row_styling: row_styling }) %>
+<% end %>

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

@@ -0,0 +1 @@
+`row_styling` can also be used to control padding on all cells in a given row via the use of the `cell_padding` key/value pair as shown here. `cell_padding` lets you use 'xxs', 'xs', 'sm', 'md', 'lg', 'xl' and 'none'.

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

@@ -0,0 +1,40 @@
+<% column_definitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+      column_styling: { 
+        cell_padding: "none",
+      }
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+      column_styling: { cell_padding: "md" },
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    }
+] %>
+
+<%= pb_rails("advanced_table", props: { id: "padding-control", table_data: @table_data, column_definitions: column_definitions }) do %>
+  <%= pb_rails("advanced_table/table_header", props: { table_id: "padding-control", column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_id: "padding-control", table_data: @table_data, column_definitions: column_definitions }) %>
+<% end %>

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

@@ -0,0 +1 @@
+`column_styling` can also be used to control padding on all cells in a given column via the use of the `cell_padding` key/value pair. `cell_padding` lets you use 'xxs', 'xs', 'sm', 'md', 'lg', 'xl' and 'none'.

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

@@ -1,4 +1,4 @@
-The `row_styling` prop can be used in conjunction with row ids to control certain styling options on individual rows. Currently, `row_styling` gives you 3 optional controls:
+The `row_styling` prop can be used in conjunction with row ids to control certain styling options on individual rows. It is an object that has several optional key/value pairs, this doc example highlights the following:
 
 - `background_color` : use this to control the background color of the row
 - `font_color`: use this to control font color for each row if needed, for example if using a darker background color.

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

@@ -1,4 +1,4 @@
-The `rowStyling` prop can be used in conjunction with row ids to control certain styling options on individual rows. Currently, `rowStyling` gives you 3 optional controls:
+The `rowStyling` prop can be used in conjunction with row ids to control certain styling options on individual rows. It is an object that has several optional key/value pairs, this doc example highlights the following:
 
 - `backgroundColor` : use this to control the background color of the row
 - `fontColor`: use this to control font color for each row if needed, for example if using a darker background color.

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

@@ -34,6 +34,6 @@
 %>
 
 <%= pb_rails("advanced_table", props: { id: "selectable_rows", table_data: @table_data_with_id, column_definitions: column_definitions, selectable_rows: true }) do %>
-  <%= pb_rails("advanced_table/table_header", props: { id: "selectable_rows", column_definitions: column_definitions, selectable_rows: true }) %>
-  <%= pb_rails("advanced_table/table_body", props: { id: "selectable_rows", table_data: @table_data_with_id, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all", selectable_rows: true }) %>
+  <%= pb_rails("advanced_table/table_header", props: { table_id: "selectable_rows", column_definitions: column_definitions, selectable_rows: true }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_id: "selectable_rows", table_data: @table_data_with_id, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all", selectable_rows: true }) %>
 <% end %>

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

@@ -21,8 +21,11 @@ examples:
   - advanced_table_selectable_rows_header_rails: Selectable Rows (No Actions Bar)
   - advanced_table_scrollbar_none: Advanced Table Scrollbar None
   - advanced_table_row_styling: Row Styling
+  - advanced_table_padding_control_per_row_rails: Padding Control using Row Styling
   - advanced_table_column_styling_rails: Column Styling
   - advanced_table_column_styling_column_headers_rails: Column Styling with Multiple Headers
+  - advanced_table_padding_control_rails: Padding Control using Column Styling
+  - advanced_table_background_control_rails: Background Control using Column Styling
   - advanced_table_column_border_color_rails: Column Group Border Color
 
 

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

@@ -331,8 +331,12 @@ export default class PbAdvancedTable extends PbEnhancedElement {
         // Split the dataContent to get all ancestor IDs, check against ExpandedRows
         const ancestorIds = dataContent.split("-").slice(0, -1);
 
+        // Get the table_id from the child row's parent to construct proper prefixed IDs
+        const parentRowId = childRow.dataset.rowParent;
+        const tableId = parentRowId ? parentRowId.split('_').slice(0, -1).join('_') : '';
+
         const prefixedAncestorIds = ancestorIds.map(
-          (id) => `${childRow.id}_${id}`
+          (id) => `${tableId}_${id}`
         );
         const allAncestorsExpanded = prefixedAncestorIds.every((id) =>
           PbAdvancedTable.expandedRows.has(id)

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

@@ -3,8 +3,8 @@
 module Playbook
   module PbAdvancedTable
     class TableBody < Playbook::KitBase
-      prop :id, type: Playbook::Props::String,
-                default: ""
+      prop :table_id, type: Playbook::Props::String,
+                      default: ""
       prop :table_data, type: Playbook::Props::Array,
                         default: []
       prop :column_definitions, type: Playbook::Props::Array,
@@ -53,7 +53,7 @@ module Playbook
         subrow_data_attributes = {
           advanced_table_content: subrow_ancestor_ids.join("-"),
           row_depth: current_depth,
-          row_parent: "#{id}_#{ancestor_ids.last}",
+          row_parent: "#{table_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, last_row: last_row, immediate_parent_row_id: immediate_parent_row_id }) if is_first_child_of_subrow && enable_toggle_expansion == "all"
@@ -69,7 +69,7 @@ module Playbook
                                   end
 
         # 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, loading: loading, selectable_rows: selectable_rows, row_id: row[:id], enable_toggle_expansion: enable_toggle_expansion, row_styling: row_styling, last_row: last_row, immediate_parent_row_id: immediate_parent_row_id })
+        output << pb_rails("advanced_table/table_row", props: { table_id: table_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, loading: loading, selectable_rows: selectable_rows, row_id: row[:id], enable_toggle_expansion: enable_toggle_expansion, row_styling: row_styling, last_row: last_row, immediate_parent_row_id: immediate_parent_row_id })
 
         if row[:children].present?
           row[:children].each do |child_row|
@@ -78,9 +78,9 @@ module Playbook
             data_content = new_ancestor_ids.join("-") + "-#{child_row.object_id}"
 
             child_data_attributes = {
-              top_parent: "#{id}_#{top_parent_id}",
+              top_parent: "#{table_id}_#{top_parent_id}",
               row_depth: current_depth + 1,
-              row_parent: "#{id}_#{immediate_parent_id}",
+              row_parent: "#{table_id}_#{immediate_parent_id}",
               advanced_table_content: data_content,
             }
 

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

@@ -3,8 +3,8 @@
 module Playbook
   module PbAdvancedTable
     class TableHeader < Playbook::KitBase
-      prop :id, type: Playbook::Props::String,
-                default: ""
+      prop :table_id, type: Playbook::Props::String,
+                      default: ""
       prop :column_definitions, type: Playbook::Props::Array,
                                 default: []
       prop :enable_toggle_expansion, type: Playbook::Props::Enum,
@@ -58,10 +58,10 @@ module Playbook
                      classname: additional_classes.join(" "),
                    }) do
             pb_rails("checkbox", props: {
-                       id: "#{id ? "#{id}-" : ''}select-all-rows",
+                       id: "#{table_id ? "#{table_id}-" : ''}select-all-rows",
                        indeterminate_main: true,
                        indeterminate_main_labels: ["", ""],
-                       name: "#{id ? "#{id}-" : ''}select-all-rows",
+                       name: "#{table_id ? "#{table_id}-" : ''}select-all-rows",
                      })
           end
         end
@@ -71,10 +71,10 @@ module Playbook
       def render_select_all_checkbox
         if selectable_rows
           pb_rails("checkbox", props: {
-                     id: "#{id ? "#{id}-" : ''}select-all-rows",
+                     id: "#{table_id ? "#{table_id}-" : ''}select-all-rows",
                      indeterminate_main: true,
                      indeterminate_main_labels: ["", ""],
-                     name: "#{id ? "#{id}-" : ''}select-all-rows",
+                     name: "#{table_id ? "#{table_id}-" : ''}select-all-rows",
                      data: {
                        action: "click->pb-advanced-table#toggleAllRowSelection",
                      },