playbook_ui 14.12.0.pre.rc.12 → 14.13.0.pre.alpha.PBNTR457formtimezoneselect6219

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b01422970c47b5ac3d53ad0fa10ea7cb9bbb8be651852f4c2ee25b2d51379ee7
-  data.tar.gz: 4a196fb9aa2fc4eea20c60530f607c89313ba0e7b36baab2915dfa1be31ceda0
+  metadata.gz: 96be297e4b256928b42d2aee573d4c7aa74e52a392ea66433309b0923616ef75
+  data.tar.gz: 23e994715b91860a0531ba2752963c035d6ff2bc8bed0f58493426a0722086e7
 SHA512:
-  metadata.gz: c240f23324bd2e796025ce55b2c4d71b24c40591bee4ae0b9f769a54907b0933874f875b0c9f16630c5e1801a882fc54278041fc612655872ab36418ddc8f62e
-  data.tar.gz: 3c9a91daa012c834a2cdef8b4be88f97df70c48b6f4bfe6b545622b80f0ca4661563b91eeaac4e9288a06f9d3c2fd998ae2890f2d918504d7accca57f1aa8748
+  metadata.gz: 80f48248b5e9d6600abf10e0c2fcb56d389f4fa04226be97e4528a93e1f69d4ecd5b321c7c33a06b357b9b8d007c4f7470f2f0a7be0a1c1034f036c9cdebbc17
+  data.tar.gz: '0508c2f2d3b3b8f9726efcfc5a21b48bb6700cde54b5d4492021a00c0ae4d0180dac59fbc23183807fd62f7ad3a230f2997792c15b428de0855de2272853948c'

data/app/pb_kits/playbook/_playbook.scss

@@ -1,7 +1,6 @@
 
 @import 'pb_advanced_table/advanced_table';
 @import 'pb_avatar/avatar';
-@import 'pb_avatar_action_button/avatar_action_button';
 @import 'pb_background/background';
 @import 'pb_badge/badge';
 @import 'pb_bar_graph/bar_graph';
@@ -15,6 +14,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';

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

@@ -47,7 +47,7 @@ export const CustomCell = ({
       <Flex 
           alignItems="center" 
           columnGap="xs"
-          justify={!hasAnySubRows ? "end" : "start"}
+          justify={!hasAnySubRows && !inlineRowLoading ? "end" : "start"}
           orientation="row"
       >
         {

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

@@ -39,8 +39,15 @@ export const TableHeaderCell = ({
   sortIcon,
   table
 }: TableHeaderCellProps) => {
-  const { sortControl, responsive, selectableRows, hasAnySubRows, showActionsBar } =
-    useContext(AdvancedTableContext);
+  const {
+    sortControl,
+    responsive,
+    selectableRows,
+    hasAnySubRows,
+    showActionsBar,
+    inlineRowLoading,
+    isActionBarVisible,
+  } = useContext(AdvancedTableContext);
 
   type justifyTypes = "none" | "center" | "start" | "end" | "between" | "around" | "evenly"
   
@@ -65,7 +72,7 @@ export const TableHeaderCell = ({
  
 const cellClassName = classnames(
   "table-header-cells",
-  `${showActionsBar && "header-cells-with-actions"}`,
+  `${showActionsBar && isActionBarVisible && "header-cells-with-actions"}`,
   `${isChrome() ? "chrome-styles" : ""}`,
   `${enableSorting ? "table-header-cells-active" : ""}`,
   { "pinned-left": responsive === "scroll" && isPinnedLeft },
@@ -91,7 +98,7 @@ const isToggleExpansionEnabled =
 
   let justifyHeader:justifyTypes;
 
-  if (header?.index === 0 && hasAnySubRows) {
+  if (header?.index === 0 && hasAnySubRows || (header?.index === 0 && inlineRowLoading)) {
     justifyHeader = enableSorting ? "between" : "start";
   } else {
     justifyHeader = isLeafColumn ? "end" : "center";

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

@@ -0,0 +1,26 @@
+export const showActionBar = (elem: HTMLElement) => {
+  elem.style.display = "block";
+  const height = elem.scrollHeight + "px";
+  elem.style.height = height;
+  elem.classList.add("is-visible");
+  elem.style.overflow = "hidden";
+
+  window.setTimeout(() => {
+    if (elem.classList.contains("is-visible")) {
+      elem.style.height = "";
+      elem.style.overflow = "visible";
+    }
+  }, 300);
+};
+
+export const hideActionBar = (elem: HTMLElement) => {
+  elem.style.height = elem.scrollHeight + "px";
+  elem.offsetHeight;
+  window.setTimeout(() => {
+    elem.style.height = "0";
+    elem.style.overflow = "hidden";
+  }, 10);
+  window.setTimeout(() => {
+    elem.classList.remove("is-visible");
+  }, 300);
+};

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

@@ -31,12 +31,12 @@
     width: 100%;
   }
 
-  .row-selection-actions-card {
-    border-bottom-right-radius: 0px !important;
-    border-bottom-left-radius: 0px !important;
-    border-bottom-color: transparent;
-  }
-
+    .row-selection-actions-card {
+      border-bottom-right-radius: 0px !important;
+      border-bottom-left-radius: 0px !important;
+      border-bottom-color: transparent;
+      transition: height 300ms ease;
+    }
   .table-header-cells:first-child {
     min-width: 180px;
   }
@@ -89,11 +89,47 @@
     }
   }
 
-
   .table-header-cells-active:first-child {
     color: $primary !important;
   }
 
+  // Sticky Header
+  .sticky-header {
+    thead {
+      z-index: 3 !important;
+    }
+  }
+
+  // Max height overflow - the below prevents expansion from overflowing container at full screen for responsive and nonresponsive tables
+  &.advanced-table-max-height-xs {
+    max-height: 320px;
+    overflow-y: auto;
+  }
+  &.advanced-table-max-height-sm {
+    max-height: 480px;
+    overflow-y: auto;
+  }
+  &.advanced-table-max-height-md {
+    max-height: 768px;
+    overflow-y: auto;
+  }
+  &.advanced-table-max-height-lg {
+    max-height: 1024px;
+    overflow-y: auto;
+  }
+  &.advanced-table-max-height-xl {
+    max-height: 1280px;
+    overflow-y: auto;
+  }
+  &.advanced-table-max-height-xxl {
+    max-height: 1440px;
+    overflow-y: auto;
+  }
+  &.advanced-table-max-height-xxxl {
+    max-height: 1920px;
+    overflow-y: auto;
+  }
+  
   // Icons
   .button-icon {
     display: flex;
@@ -179,7 +215,7 @@
   }
 
   // Responsive Styles
-  @media only screen and (max-width: $screen-xl-min) {  
+  @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,
@@ -215,7 +251,27 @@
       .bg-white td:first-child {
           background-color: $white;
       }
-      
+      .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) {
@@ -303,7 +359,15 @@
         .bg-white td:first-child {
           background-color: $bg_dark_card;
         }
+        .sticky-header {
+          thead {
+            th:first-child {
+              background: $bg_dark;
+              box-shadow: 1px 0 10px -2px $border_dark !important;
+            }
+          }
+        }
       }
     }
   }
-}
+}

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from "react"
+import React, { useState, useEffect, useCallback, useRef } from "react"
 import classnames from "classnames"
 
 import { GenericObject } from "../types"
@@ -27,6 +27,7 @@ import FlexItem from "../pb_flex/_flex_item"
 import AdvancedTableContext from "./Context/AdvancedTableContext"
 
 import { updateExpandAndCollapseState } from "./Utilities/ExpansionControlHelpers"
+import { showActionBar, hideActionBar } from "./Utilities/ActionBarAnimationHelper"
 
 import { CustomCell } from "./Components/CustomCell"
 import { TableHeader } from "./SubKits/TableHeader"
@@ -48,6 +49,7 @@ type AdvancedTableProps = {
   initialLoadingRowsCount?: number
   inlineRowLoading?: boolean
   loading?: boolean | string
+  maxHeight?: "auto" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl"
   onRowToggleClick?: (arg: Row<GenericObject>) => void
   onToggleExpansionClick?: (arg: Row<GenericObject>) => void
   pagination?: boolean,
@@ -79,6 +81,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     initialLoadingRowsCount = 10,
     inlineRowLoading = false,
     loading,
+    maxHeight,
     onRowToggleClick,
     onToggleExpansionClick,
     pagination = false,
@@ -113,7 +116,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   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 createCellFunction = (cellAccessors: string[], customRenderer?: (row: Row<GenericObject>, value: any) => JSX.Element, isFirstColumn?: boolean) => {
     const columnCells = ({
       row,
       getValue,
@@ -123,7 +126,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     }) => {
       const rowData = row.original
 
-    if (index === 0) {
+    if (isFirstColumn) {
       switch (row.depth) {
         case 0: {
           return (
@@ -161,15 +164,16 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     return columnCells
   }
 
-  const buildColumns = (columnDefinitions: GenericObject[]): any => {
+  const buildColumns = (columnDefinitions: GenericObject[], isRoot= true): any => {
     return (
       columnDefinitions &&
       columnDefinitions.map((column, index) => {
+        const isFirstColumn = isRoot && index === 0; 
         //Checking to see if grouped column or not
         if (column.columns && column.columns.length > 0) {
           return {
             header: column.label || "",
-            columns: buildColumns(column.columns),
+            columns: buildColumns(column.columns, false),
           };
         } else {
           // Define the base column structure
@@ -183,7 +187,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             columnStructure.cell = createCellFunction(
               column.cellAccessors,
               column.customRenderer,
-              index
+              isFirstColumn
             );
           }
 
@@ -288,6 +292,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   const classes = classnames(
     buildCss("pb_advanced_table"),
     `advanced-table-responsive-${responsive}`,
+    maxHeight ? `advanced-table-max-height-${maxHeight}` : '', // max height as kit prop not global prop to control overflow-y
     globalProps(props),
     className
   )
@@ -295,6 +300,20 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   const onPageChange = (page: number) => {
     table.setPageIndex(page - 1)
   }
+//When to show the actions bar as a whole
+  const isActionBarVisible = selectableRows && showActionsBar && selectedRowsLength > 0
+
+  //Ref and useEffect for animating the actions bar
+  const cardRef = useRef(null);
+  useEffect(() => {
+    if (cardRef.current) {
+      if (isActionBarVisible) {
+        showActionBar(cardRef.current);
+      } else {
+        hideActionBar(cardRef.current);
+      }
+    }
+  }, [isActionBarVisible]);
 
   return (
     <div {...ariaProps} 
@@ -311,6 +330,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             expandedControl,
             handleExpandOrCollapse,
             inlineRowLoading,
+            isActionBarVisible,
             loading,
             responsive,
             setExpanded,
@@ -333,27 +353,24 @@ const AdvancedTable = (props: AdvancedTableProps) => {
                   total={table.getPageCount()}
                   />
           }
-          {
-            selectableRows && showActionsBar && (
-              <Card className="row-selection-actions-card"
-                  padding="xs"
+          <Card
+              borderNone={!isActionBarVisible}
+              className={`${isActionBarVisible && "show-action-card row-selection-actions-card"}`}
+              htmlOptions={{ ref: cardRef as any }}
+              padding={`${isActionBarVisible ? "xs" : "none"}`}
+          >
+            <Flex alignItems="center" 
+                justify="between"
+            >
+              <Caption color="light" 
+                  paddingLeft="xs" 
+                  size="xs"
               >
-                <Flex alignItems="center"
-                    justify="between"
-                >
-                    <Caption color="light"
-                        paddingLeft="xs"
-                        size="xs"
-                    >
-                      {selectedRowsLength} Selected
-                    </Caption>
-                    <FlexItem>
-                    {actions}
-                    </FlexItem>
-                </Flex>
-              </Card>
-            )
-          }
+                {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 }.merge(object.table_props)) 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,19 +10,28 @@ 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: {}
+      prop :max_height, type: Playbook::Props::Enum,
+                        values: %w[auto xs sm md lg xl xxl xxxl],
+                        default: "auto"
 
       def classname
-        generate_classname("pb_advanced_table", responsive_classname, separator: " ")
+        generate_classname("pb_advanced_table", responsive_classname, max_height_classname, separator: " ")
       end
 
       def responsive_classname
         responsive == "scroll" ? "advanced-table-responsive-scroll" : "advanced-table-responsive-none"
       end
+
+      def max_height_classname
+        max_height.present? ? "advanced-table-max-height-#{max_height}" : ""
+      end
     end
   end
 end

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_column_headers_custom_cell.jsx

@@ -0,0 +1,75 @@
+import React from "react"
+import { AdvancedTable, Pill } from "playbook-ui"
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const AdvancedTableColumnHeadersCustomCell = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      label: "Enrollment Data",
+      columns: [
+        {
+          accessor: "newEnrollments",
+          label: "New Enrollments",
+          customRenderer: (row, value) => (
+            <Pill text={value} 
+                variant="success" 
+            />
+          ),
+        },
+        {
+          accessor: "scheduledMeetings",
+          label: "Scheduled Meetings",
+          customRenderer: (row, value) => (
+            <Pill text={value} 
+                variant="info" 
+            />
+          ),
+        },
+      ],
+    },
+    {
+      label: "Performance Data",
+      columns: [
+        {
+          accessor: "attendanceRate",
+          label: "Attendance Rate",
+        },
+        {
+          accessor: "completedClasses",
+          label: "Completed Classes",
+          customRenderer: (row, value) => (
+            <Pill text={value} 
+                variant="error" 
+            />
+          ),
+        },
+        {
+          accessor: "classCompletionRate",
+          label: "Class Completion Rate",
+        },
+        {
+          accessor: "graduatedStudents",
+          label: "Graduated Students",
+        },
+      ],
+    },
+  ];
+  
+
+  return (
+    <>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          tableData={MOCK_DATA}
+          {...props}
+      />
+    </>
+  )
+}
+
+export default AdvancedTableColumnHeadersCustomCell

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_responsive.html.erb

@@ -0,0 +1,38 @@
+
+<% 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("title", props: { size: 4 })  do %> Not Responsive <% end %>
+<%= pb_rails("advanced_table", props: { id: "table_props_table_non_responsive", table_data: @table_data, column_definitions: column_definitions, responsive: "none" }) %>
+
+<%= pb_rails("title", props: { padding_top: "sm", size: 4 })  do %> Responsive as Default <% end %>
+<%= pb_rails("advanced_table", props: { id: "table_props_table_responsive", table_data: @table_data, column_definitions: column_definitions }) %>

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: { container: false, sticky: true }}) %>
+<%= 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

@@ -44,6 +44,7 @@ const AdvancedTableTableProps = (props) => {
     <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 +1,3 @@
-This kit uses the [Table kit](https://playbook.powerapp.cloud/kits/table) under the hood which comes with it's 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 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 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 +1,3 @@
-This kit uses the [Table kit](https://playbook.powerapp.cloud/kits/table/react) under the hood which comes with it's 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 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 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.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.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: "table_props_table", table_data: @table_data, column_definitions: column_definitions, max_height: "xs", table_props: { sticky: true }}) %>