playbook_ui 14.17.0.pre.alpha.PLAY20547327 → 14.17.0.pre.alpha.alphaforaudiences7167

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9fcf2c083e29de497b80eedc979e33e2380754f0e5c7da746dd2bd0a825db844
-  data.tar.gz: e26b2e09e2e7c403eed4cb5ae1b3ab356b1235d19de1ddf4af635764b9e56d60
+  metadata.gz: 2d4e1505953fc9d8679af10f4517e1db1910b806f2540bcba412afbaca8eb912
+  data.tar.gz: e1ec597e443b273d2037e5e0a572a9ca8f52ce25fb3754ccbc24edebd969377b
 SHA512:
-  metadata.gz: 28d405dfcfd84f35a79e7b2228a30df54dc323b27120b56ebbf2e92f119cf8b704034791d33525a60fa21e3f1182f6b46f1f1c7df6e6e7ec58234fcfa5a31a32
-  data.tar.gz: 4e4f3d1af055445096f0850a06323c722636e70d2bab273ba81aaeab762acf62d778311ba1f157e0842d81def66b671c525b69bdb480d9e54318f45f2b883993
+  metadata.gz: c5e5f58405349fa05f6942b377efee9d7c845c74dfbbe1009fe28e9c50459871f1dcc0e23f9a4bc2e190493ef648fce14e3b06bd0e697fa8a07114c95068c219
+  data.tar.gz: 84723e76ae32724c3926bf9ac0a7b9b048ae640635f982ca9126ae99fdbd97528215d7c7dd563e739d9a3718787a98f31ce31729a725080466de72ffb50cbf61

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

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect } from "react"
+import React, { useContext } from "react"
 import classnames from "classnames"
 import { flexRender, Row, Cell } from "@tanstack/react-table"
 
@@ -32,21 +32,9 @@ export const RegularTableView = ({
     table,
     selectableRows,
     hasAnySubRows,
-    stickyLeftColumn
+    isPinnedLeft = false,
   } = useContext(AdvancedTableContext)
 
-
-  useEffect(() => {
-    if (stickyLeftColumn && Array.isArray(stickyLeftColumn)) {
-      stickyLeftColumn.forEach((columnId) => {
-        const column = table.getColumn(columnId);
-        if (column && column.getCanPin()) {
-          column.pin('left');
-        }
-      });
-    }
-  },[stickyLeftColumn, table]);
-
   const columnPinning = table.getState().columnPinning || { left: [] };
   const columnDefinitions = table.options.meta?.columnDefinitions || [];
 
@@ -94,7 +82,7 @@ export const RegularTableView = ({
               {row.getVisibleCells().map((cell: Cell<GenericObject, unknown>, i: number) => {
                 const isPinnedLeft = columnPinning.left.includes(cell.column.id);
                 const isLastCell = cell.column.parent?.columns?.at(-1)?.id === cell.column.id;
-                const { column } = cell;
+
                 return (
                   <td
                       align="right"
@@ -102,17 +90,9 @@ export const RegularTableView = ({
                         `${cell.id}-cell position_relative`,
                         isChrome() ? "chrome-styles" : "",
                         isPinnedLeft && 'pinned-left',
-                        stickyLeftColumn && stickyLeftColumn.length > 0 && isPinnedLeft && 'sticky-left',
                         isLastCell && 'last-cell',
                       )}
                       key={`${cell.id}-data`}
-                      style={{
-                        left: isPinnedLeft
-                          ? i === 1 //Accounting for set min-width for first column
-                            ? '180px'
-                            : `${column.getStart("left")}px`
-                          : undefined,
-                      }}
                   >
                     {collapsibleTrail && i === 0 && row.depth > 0 && renderCollapsibleTrail(row.depth)}
                     <span id={`${cell.id}-span`}>

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

@@ -1,6 +1,6 @@
 import React, { useContext } from "react"
 import classnames from "classnames"
-import { flexRender, Header, Table, RowModel } from "@tanstack/react-table"
+import { flexRender, Header, Table } from "@tanstack/react-table"
 
 import { GenericObject } from "../../types"
 
@@ -8,16 +8,9 @@ import { GlobalProps } from "../../utilities/globalProps"
 
 import Flex from "../../pb_flex/_flex"
 import Checkbox from "../../pb_checkbox/_checkbox"
-import Dropdown from "../../pb_dropdown/_dropdown"
-import DropdownTrigger from "../../pb_dropdown/subcomponents/DropdownTrigger"
-import DropdownOption from "../../pb_dropdown/subcomponents/DropdownOption"
-import DropdownContainer from "../../pb_dropdown/subcomponents/DropdownContainer"
-import Icon from "../../pb_icon/_icon"
 
 import { SortIconButton } from "./SortIconButton"
 import { ToggleIconButton } from "./ToggleIconButton"
-import { displayIcon } from "../Utilities/IconHelpers"
-import { updateExpandAndCollapseState } from "../Utilities/ExpansionControlHelpers"
 
 import { isChrome } from "../Utilities/BrowserCheck"
 
@@ -47,17 +40,11 @@ export const TableHeaderCell = ({
   table
 }: TableHeaderCellProps) => {
   const {
-    expanded,
-    setExpanded,
-    expandByDepth,
-    onExpandByDepthClick,
-    toggleExpansionIcon,
     sortControl,
     responsive,
     selectableRows,
     hasAnySubRows,
     showActionsBar,
-    stickyLeftColumn,
     inlineRowLoading,
     isActionBarVisible,
   } = useContext(AdvancedTableContext);
@@ -89,9 +76,7 @@ const cellClassName = classnames(
   `${isChrome() ? "chrome-styles" : ""}`,
   `${enableSorting ? "table-header-cells-active" : ""}`,
   { "pinned-left": responsive === "scroll" && isPinnedLeft },
-   isLastHeaderCell ? "last-header-cell" : "",
-  stickyLeftColumn && stickyLeftColumn.length > 0 && isPinnedLeft ? 'sticky-left' : "",
-
+   isLastHeaderCell ? "last-header-cell" : ""
 ); 
 
 const cellId = `${loading ? 
@@ -119,21 +104,6 @@ const isToggleExpansionEnabled =
     justifyHeader = isLeafColumn ? "end" : "center";
   }
   
-  const handleExpandDepth = (depth: number) => {
-    if (onExpandByDepthClick) {
-      const flatRows = table?.getRowModel().flatRows
-      onExpandByDepthClick(depth, flatRows)
-    }
-    const updated = updateExpandAndCollapseState(
-      table.getRowModel(),
-      expanded,
-      undefined,
-      depth
-    )
-    setExpanded(updated)
-  }
-  
-
   return (
     <th
         align="right"
@@ -141,13 +111,6 @@ const isToggleExpansionEnabled =
         colSpan={header?.colSpan}
         id={cellId}
         key={`${header?.id}-header`}
-        style={{
-          left: isPinnedLeft
-            ? header?.index === 1 //Accounting for set min-width for first column
-              ? '180px'
-              : `${header?.column.getStart("left")}px`
-            : undefined,
-        }}
     >
       {header?.isPlaceholder ? null : headerChildren && header?.index === 0 ? (
         <Flex alignItems="center">
@@ -170,36 +133,9 @@ const isToggleExpansionEnabled =
               />
             )
           }
-          {isToggleExpansionEnabled && hasAnySubRows && !expandByDepth && (
+          {isToggleExpansionEnabled && hasAnySubRows && (
               <ToggleIconButton onClick={handleExpandOrCollapse} />
             )}
-          {isToggleExpansionEnabled && hasAnySubRows && expandByDepth && (
-              <Dropdown className="expand-by-depth-dropdown-wrapper" 
-                  options={expandByDepth}
-              >
-                <DropdownTrigger className="gray-icon toggle-all-icon">
-                  <Icon icon={displayIcon(toggleExpansionIcon)[0]} />
-                </DropdownTrigger>
-                <DropdownContainer className="expand-by-depth-dropdown">
-                  {expandByDepth.map((option:{ [key: string]: any }, index: number) => (
-                    <DropdownOption
-                        key={index}
-                        option={option}
-                        padding="none"
-                    > 
-                      <Flex
-                          alignItems="center"
-                          htmlOptions={{onClick: () => {handleExpandDepth(option.depth)} }}
-                          paddingX="sm"
-                          paddingY="xs"
-                          >
-                            {option.label}
-                          </Flex>
-                    </DropdownOption>
-                  ))}
-                </DropdownContainer>
-              </Dropdown>
-            )}
 
           {isToggleExpansionEnabledLoading &&(
               <div className="loading-toggle-icon header-toggle-icon" />

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

@@ -22,9 +22,10 @@ export function useTableActions({
   // Handle expand/collapse
   const handleExpandOrCollapse = useCallback(async (row: Row<GenericObject>) => {
     onToggleExpansionClick && onToggleExpansionClick(row);
+
     const expandedState = expanded;
     const targetParent = row?.parentId;
-    const updatedRows = await updateExpandAndCollapseState(table.getRowModel(), expandedState, targetParent, undefined);
+    const updatedRows = await updateExpandAndCollapseState(table.getRowModel(), expandedState, targetParent);
     setExpanded(updatedRows);
   }, [expanded, setExpanded, onToggleExpansionClick, table]);
 

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

@@ -1,4 +1,4 @@
-import { RowModel, Row } from "@tanstack/react-table"
+import { RowModel } from "@tanstack/react-table"
 import { ExpandedStateObject } from "./types"
 import { GenericObject } from "../../types"
 
@@ -14,40 +14,30 @@ const filterExpandableRows = (expandedState: Record<string, boolean>) => {
 export const updateExpandAndCollapseState = (
   tableRows: RowModel<GenericObject>,
   expanded: Record<string, boolean>,
-  targetParent?: string,
-  targetDepth?: number,
+  targetParent: string
 ) => {
   const updateExpandedRows: Record<string, boolean> = {};
-  const rows = targetDepth !== undefined ? tableRows.flatRows : tableRows.rows;
+  const rows = tableRows.rows;
 
-  const rowsToToggle: Row<GenericObject>[] = [];
+  let isExpansionConsistent = true;
+  const areRowsExpanded = new Set<boolean>();
 
   for (const row of rows) {
-    const shouldBeUpdated =
-      targetDepth !== undefined
-        ? row.depth <= targetDepth
-        : targetParent === undefined
-        ? row.depth === 0
-        : targetParent === row.parentId;
-
+    const shouldBeUpdated = targetParent === undefined ? row.depth === 0 : targetParent === row.parentId;
+    
     if (shouldBeUpdated) {
-      rowsToToggle.push(row);
-    }
-  }
-
-  // Check if we are expanding or collapsing
-  const anyCollapsed = rowsToToggle.some((row) => !row.getIsExpanded());
-  const isExpandAction = anyCollapsed;
-
-  
-  for (const row of rowsToToggle) {
-    const shouldUpdate =
-      isExpandAction || targetDepth === undefined
-        ? true
-        : row.depth === targetDepth;
-
-    if (shouldUpdate) {
-      updateExpandedRows[row.id] = isExpandAction;
+      const isExpanded = row.getIsExpanded();
+      areRowsExpanded.add(isExpanded);
+
+      updateExpandedRows[row.id] = !isExpansionConsistent ? true : !isExpanded;
+
+      if (areRowsExpanded.size > 1) {
+        isExpansionConsistent = false;
+        // If expansion inconsistent, ensure all target rows are set to expand
+        for (const key in updateExpandedRows) {
+          updateExpandedRows[key] = true;
+        }
+      }
     }
   }
 

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

@@ -8,7 +8,6 @@
 @import "../tokens/screen_sizes";
 @import "../tokens/shadows";
 @import "../tokens/positioning";
-@import "./scss_partials/advanced_table_sticky_mixin";
 
 .pb_advanced_table {
   $border-color: 1px solid $border_light;
@@ -94,8 +93,8 @@
       border-right: 1px solid $border_light !important;
     }
     .table-header-cells-custom {
-      text-align: center;
-      [class^="pb_checkbox_kit"] .pb_checkbox_label {
+      text-align:center;
+      [class^=pb_checkbox_kit] .pb_checkbox_label {
         padding-left: 0px;
       }
     }
@@ -105,7 +104,7 @@
     }
     // Right align header content of first data column in selectable row no subrow setup
     &.selectable-rows-enabled {
-      tr {
+      tr { 
         th:nth-child(2),
         .pb_flex_kit_orientation_row_justify_content_start_align_items_center_spacing_none.gap_none {
           justify-content: flex-end;
@@ -123,20 +122,13 @@
       }
 
       // Set fixed width for checkbox column
-      &.table-header-cells-custom,
+      &.table-header-cells-custom, 
       &.checkbox-cell.checkbox-cell-header {
         width: 40px !important;
         min-width: 40px !important;
         box-sizing: border-box !important;
       }
     }
-    .expand-by-depth-dropdown-wrapper {
-      position: unset !important;
-    }
-    .expand-by-depth-dropdown {
-      width: unset !important;
-      text-align: left;
-    }
   }
 
   .pb_advanced_table_body {
@@ -153,7 +145,7 @@
     .checkbox-cell {
       display: flex;
       justify-content: center;
-      [class^="pb_checkbox_kit"] .pb_checkbox_label {
+      [class^=pb_checkbox_kit] .pb_checkbox_label {
         padding-left: 0px;
       }
     }
@@ -181,7 +173,7 @@
       }
     }
     td {
-      [class^="pb_text_input_kit"] .text_input_wrapper input {
+      [class^=pb_text_input_kit] .text_input_wrapper input {
         padding: 0 $space_xxs;
         font-size: 14px;
         text-align: right;
@@ -238,12 +230,12 @@
     max-height: 1920px;
     overflow-y: auto;
   }
-
+  
   // Fullscreen
   &.advanced-table-allow-fullscreen {
     transition: all 0.3s ease;
   }
-
+  
   &.advanced-table-fullscreen {
     background-color: $bg_light;
     box-sizing: border-box;
@@ -256,10 +248,7 @@
     z-index: $z_10;
 
     .pb_table {
-      th,
-      td,
-      div,
-      button {
+      th, td, div, button {
         font-size: calc(100%);
       }
       box-sizing: border-box;
@@ -277,7 +266,7 @@
       }
     }
   }
-
+  
   .advanced-table-fullscreen-header {
     background-color: $white;
     height: 44px;
@@ -383,32 +372,78 @@
     width: 2px;
   }
 
-  // Sticky Left Columns Styling
-  &[class*="advanced-table-sticky-left-columns"] {
-    overflow-x: scroll;
-    .sticky-left {
-      position: sticky !important;
-      z-index: 2;
-      background-color: $white;
-      box-shadow: $shadow_deep;
-    }
-    @include advanced-table-sticky-mixin(
-      $border_light,
-      $white,
-      lighten($silver, $opacity_7)
-    );
-  }
-
   // Responsive Styles
   @media only screen and (max-width: $screen-xl-min) {
     &[class*="advanced-table-responsive-scroll"] {
+      border-radius: 4px;
+      box-shadow: 1px 0 0 0px $border_light,
+                  -1px 0 0 0px $border_light;
+      display: block;
       overflow-x: auto;
       width: 100%;
-      @include advanced-table-sticky-mixin(
-        $border_light,
-        $white,
-        lighten($silver, $opacity_7)
-      );
+      [class^=pb_table].table-sm.table-card thead tr th:first-child,
+      [class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:first-child {
+        border-left-width: 0px !important;
+      }
+      [class^=pb_table].table-sm.table-card thead tr th:last-child,
+      [class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:last-child {
+        border-right-width: 0px;
+      }
+      [class^=pb_table].table-sm.table-card tbody tr:last-child td:first-child,
+      [class^=pb_table].table-sm.table-card tbody tr:last-child td:last-child {
+          border-radius: 0 0 0 0;
+        }
+      .table-header-cells:first-child,
+      td:first-child,
+      .pb_table_td:first-child,
+      .checkbox-cell.checkbox-cell-header:first-child,
+      [class*="pinned-left"] {
+          background-color: $white;
+          box-shadow: $shadow_deep !important;
+          position: sticky !important;
+          left: 0;
+          z-index: 2;
+      }
+      .bg-silver td:first-child {
+        background-color: lighten($silver, $opacity_7);
+      }
+      .bg-white td:first-child {
+          background-color: $white;
+      }
+
+      .virtualized-table-row {
+        &.bg-silver td:first-child {
+          background-color: lighten($silver, $opacity_7);
+        }
+        &.bg-white td:first-child {
+          background-color: $white;
+        }
+        &.bg-row-selection td:first-child {
+          background-color: $info_subtle;
+        }
+      }
+
+      .row-selection-actions-card {
+        border-right-width: 0px;
+        border-left-width: 0px;
+        position: sticky;
+        top: 0;
+        left: 0;
+        border-radius: unset;
+      }
+      .checkbox-cell {
+        display: table-cell !important;
+      }
+      .sticky-header {
+        thead {
+          th:first-child {
+            box-shadow: 1px 0 10px -2px $border_light !important;
+          }
+        }
+        .pb_advanced_table_header {
+          box-shadow: none !important;
+        }
+      }
     }
   }
   @media only screen and (min-width: $screen-xl-min) {
@@ -445,9 +480,7 @@
       }
     }
 
-    .table-header-cells:first-child,
-    td:first-child,
-    .pb_table_td:first-child {
+    .table-header-cells:first-child, td:first-child, .pb_table_td:first-child {
       box-shadow: 1px 0px 0px 0px $border_dark !important;
     }
 
@@ -455,14 +488,12 @@
       background-color: $border_dark !important;
     }
 
-    .sort-button-icon,
-    .header-sort-button > div,
-    .pb_th_link {
+    .sort-button-icon, .header-sort-button > div, .pb_th_link {
       color: $white !important;
     }
 
     .gray-icon {
-      color: $text_dk_light !important;
+      color:  $text_dk_light !important;
     }
 
     .sticky-header {
@@ -505,33 +536,63 @@
       z-index: $z_10;
     }
 
-    &[class*="advanced-table-sticky-left-columns"] {
-      .sticky-left {
-        background-color: $bg_dark;
-      }
-      @include advanced-table-sticky-mixin(
-        $border_dark,
-        $bg_dark_card,
-        $bg_dark
-      );
-    }
-
     // Dark Mode Responsive Styles
     @media only screen and (max-width: $screen-xl-min) {
       &[class*="advanced-table-responsive-scroll"] {
+        border-radius: 4px;
+        box-shadow: 1px 0 0 0px $border_dark,
+                    -1px 0 0 0px $border_dark;
+        display: block;
+        overflow-x: scroll;
+        width: 100%;
+        [class^=pb_table].table-sm.table-card thead tr th:first-child,
+        [class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:first-child {
+          border-left-width: 0px;
+        }
+        [class^=pb_table].table-sm.table-card thead tr th:last-child,
+        [class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:last-child {
+          border-right-width: 0px;
+        }
+        [class^=pb_table].table-sm.table-card tbody tr:last-child td:first-child,
+        [class^=pb_table].table-sm.table-card tbody tr:last-child td:last-child {
+            border-radius: 0 0 0 0;
+        }
+        .table-header-cells:first-child,
+        td:first-child,
+        .pb_table_td:first-child,
+        .checkbox-cell.checkbox-cell-header:first-child,
+        [class*="pinned-left"] {
+          background: $bg_dark_card;
+          border-right: $border_dark;
+          box-shadow: $shadow_deep !important;
+          position: sticky !important;
+        }
+        .bg-silver td:first-child {
+          background-color: $bg_dark;
+        }
+        .bg-white td:first-child {
+          background-color: $bg_dark_card;
+        }
+
+        // Dark mode virtualized rows
+        .virtualized-table-row {
+          &.bg-silver td:first-child {
+            background-color: $bg_dark;
+          }
+          &.bg-white td:first-child {
+            background-color: $bg_dark_card;
+          }
+        }
+
         .sticky-header {
           thead {
             th:first-child {
-              background: $bg_dark_card;
+              background: $bg_dark;
+              box-shadow: 1px 0 10px -2px $border_dark !important;
             }
           }
         }
-        @include advanced-table-sticky-mixin(
-          $border_dark,
-          $bg_dark_card,
-          $bg_dark
-        );
       }
     }
   }
-}
+}

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

@@ -38,8 +38,6 @@ type AdvancedTableProps = {
   data?: { [key: string]: string }
   enableToggleExpansion?: "all" | "header" | "none"
   expandedControl?: GenericObject
-  expandByDepth?: { [key: string]: string | number }
-  onExpandByDepthClick?: (arg: number, arg1: any) => void
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string
   initialLoadingRowsCount?: number
@@ -75,8 +73,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     data = {},
     enableToggleExpansion = "header",
     expandedControl,
-    expandByDepth,
-    onExpandByDepthClick,
     htmlOptions = {},
     id,
     initialLoadingRowsCount = 10,
@@ -91,7 +87,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     showActionsBar = true,
     selectableRows,
     sortControl,
-    stickyLeftColumn,
     tableData,
     tableOptions,
     tableProps,
@@ -238,7 +233,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
       'advanced-table-fullscreen': isFullscreen,
       'advanced-table-allow-fullscreen': allowFullScreen
     },
-    {'advanced-table-sticky-left-columns': stickyLeftColumn && stickyLeftColumn.length > 0},
     globalProps(props),
     className
   );
@@ -284,7 +278,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             columnDefinitions={columnDefinitions}
             enableToggleExpansion={enableToggleExpansion}
             enableVirtualization={virtualizedRows}
-            expandByDepth={expandByDepth}
             expanded={expanded}
             expandedControl={expandedControl}
             handleExpandOrCollapse={handleExpandOrCollapse}
@@ -293,13 +286,11 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             isActionBarVisible={isActionBarVisible}
             isFullscreen={isFullscreen}
             loading={loading}
-            onExpandByDepthClick={onExpandByDepthClick}
             responsive={responsive}
             selectableRows={selectableRows}
             setExpanded={setExpanded}
             showActionsBar={showActionsBar}
             sortControl={sortControl}
-            stickyLeftColumn={stickyLeftColumn}
             subRowHeaders={tableOptions?.subRowHeaders}
             table={table}
             tableContainerRef={tableWrapperRef}

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

@@ -30,4 +30,4 @@
     }
 ] %>
 
-<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions, table_props: { vertical_border: true, container: false }}) %>
+<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions, responsive: "none", table_props: { container: false, sticky: true }}) %>

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

@@ -37,13 +37,14 @@ const AdvancedTableTableProps = (props) => {
 
   const tableProps = {
     container: false,
-    verticalBorder: true
+    sticky: true
   }
 
   return (
     <div>
       <AdvancedTable
           columnDefinitions={columnDefinitions}
+          responsive="none"
           tableData={MOCK_DATA}
           tableProps={tableProps}
           {...props}

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

@@ -1,3 +1,3 @@
-This kit uses the [Table kit](https://playbook.powerapp.cloud/kits/table/react) under the hood which comes with its own set of props. If you want to apply certain Table props to that underlying kit, you can do so by using the optional `table_props` prop. This prop must be an object that contains valid Table props. For a full list of Table props, see [here](https://playbook.powerapp.cloud/kits/table/react).
+This kit uses the [Table kit](https://playbook.powerapp.cloud/kits/table) under the hood which comes with its own set of props. If you want to apply certain Table props to that underlying kit, you can do so by using the optional `table_props` prop. This prop must be an object that contains valid Table props. For a full list of Table props, see [here](https://playbook.powerapp.cloud/kits/table).
 
-This doc example showcases the use of two table props, including how to render the vertical borders between columns. 
+This doc example showcases how to set a sticky header for a nonresponsive table. To achieve sticky header AND responsive functionality, see the ["Table Props Sticky Header"](https://playbook.powerapp.cloud/kits/advanced_table#table-props-sticky-header) doc example below.

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

@@ -1,3 +1,3 @@
 This kit uses the [Table kit](https://playbook.powerapp.cloud/kits/table/react) under the hood which comes with its own set of props. If you want to apply certain Table props to that underlying kit, you can do so by using the optional `tableProps` prop. This prop must be an object that contains valid Table props. For a full list of Table props, see [here](https://playbook.powerapp.cloud/kits/table/react).
 
-This doc example showcases the use of two table props, including how to render the vertical borders between columns. 
+This doc example showcases how to set a sticky header for a nonresponsive table. To achieve sticky header AND responsive functionality, see the ["Table Props Sticky Header"](https://playbook.powerapp.cloud/kits/advanced_table/react#table-props-sticky-header) doc example below.