playbook_ui 14.22.0.pre.rc.7 → 14.23.0.pre.alpha.PLAY2146dropdownactivestylesreact9141

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 41c18c0c1f4ae27ccea671a7ca29e35edfdef4a22b4cfc806cc27f90e0d63814
-  data.tar.gz: d3b75ef1e55dd2a03b84f59fd424a1cbcc2eb7814a3f26095fb9e691a2b87597
+  metadata.gz: b783164512f6b5e7e98483119372bb12b40995eb3e6d26e82b404adf26a087f5
+  data.tar.gz: 95361abd82579e6d3ce4c721386b6939fd878d1d17c040294745b9a30ef9cf1c
 SHA512:
-  metadata.gz: '08bb1b746b94d9a8df7bb6a2d612b5546f5634fcfdf60b95e62035850bc302d1899628d01c86f7cd3f0e11a5d69e2905b6e952cbb0ba9c505a64320a3da9502f'
-  data.tar.gz: 0adc5454fae876ffc7bd1defcc215eda7939244cd089621ad9a2a7aa9ec52de0640fd2f93a6ab76a8ccedf0c9767f0c12b13f7408de2baf838207117cf3d0e49
+  metadata.gz: 1ec3ee8c3daaaa8a0efa2af68a2a25975d8c8a079b9b8da8cfe3f3e19464801cddcdf8507949cdb04d1cc24399ca29369345de0e05fc83494e515317293cb97b
+  data.tar.gz: 3a0e4707bfd204588fc5b5559a8d4dc3bc6f628d901b8d8f36ec626ce9f226933583e47649b80a9f7b1fef729ddefafbdc8f146a18bd2e344fd9a53ebcbd297c

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

@@ -7,6 +7,7 @@ import { GlobalProps } from "../../utilities/globalProps"
 
 import Flex from "../../pb_flex/_flex"
 import Caption from "../../pb_caption/_caption"
+import Icon from "../../pb_icon/_icon"
 
 import { ToggleIconButton } from "./ToggleIconButton"
 import { renderCollapsibleTrail } from "./CollapsibleTrail"
@@ -32,17 +33,19 @@ export const SubRowHeaderRow = ({
   subRowHeaders,
   table,
 }: SubRowHeaderRowProps & GlobalProps) => {
-  const { inlineRowLoading } = useContext(AdvancedTableContext)
+  const { inlineRowLoading, customSort, onCustomSortClick } = useContext(AdvancedTableContext)
 
   const numberOfColumns = table.getAllFlatColumns().length
   const rowHasChildren = row.original.children ? true : false
   const canExpand = inlineRowLoading ? rowHasChildren : row.getCanExpand()
+  const hasSubrowsToSort = row.getParentRow()?.subRows
+
 
   return (
     <tr className="custom-row bg-silver">
       <td
           className={`custom-row-first-column ${
-          isChrome() ? "chrome-styles" : ""
+            isChrome() ? "chrome-styles" : ""
           }`}
           colSpan={1}
       >
@@ -50,21 +53,39 @@ export const SubRowHeaderRow = ({
         <div style={{ paddingLeft: `${row.depth * 1.25}em` }}>
           <Flex align="center" 
               columnGap="xs"
+              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+              //@ts-ignore
+              justifyContent={customSort && hasSubrowsToSort && hasSubrowsToSort.length > 1 ? "between" : undefined}
           >
-            {enableToggleExpansion === "all" && canExpand ? (
-              <ToggleIconButton onClick={onClick} 
-                  row={row}
+            <Flex columnGap="xs">
+              {enableToggleExpansion === "all" && canExpand ? (
+                <ToggleIconButton onClick={onClick} 
+                    row={row} 
+                />
+              ) : null}
+              <Caption
+                  marginLeft={canExpand ? "none" : "xs"}
+                  text={subRowHeaders[row.depth - 1]}
               />
-            ) : null}
-            <Caption
-                marginLeft={canExpand ? "none" : "xs"}
-                text={subRowHeaders[row.depth - 1]}
-            />
+            </Flex>
+            {customSort && hasSubrowsToSort && hasSubrowsToSort.length > 1 && (
+              <button
+                  aria-label="Sort this group"
+                  className="sort-button-icon gray-icon"
+                  onClick={() => { onCustomSortClick && onCustomSortClick(row.getParentRow()?.subRows)}}
+              >
+                <Icon 
+                    cursor="pointer" 
+                    fixedWidth 
+                    icon="sort" 
+                />
+              </button>
+            )}
           </Flex>
         </div>
       </td>
 
       <td colSpan={numberOfColumns - 1} />
     </tr>
-  )
+  );
 }

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

@@ -101,7 +101,6 @@ export const TableHeaderCell = ({
     if (!header) return false;
   
     if (header.colSpan > 1 && header.column.parent !== undefined) return true;
-  
     const parent = header.column.parent;
   
     if (!parent) {

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

@@ -83,11 +83,11 @@ export function useTableState({
   const buildColumns = useCallback((columnDefinitions: GenericObject[], isRoot = true): any[] => {
     return columnDefinitions?.map((column, index) => {
       const isFirstColumn = isRoot && index === 0;
-
       // Handle grouped columns
       if (column.columns && column.columns.length > 0) {
         return {
-          header: column.label || "",
+          header: column.header ?? column.label ?? "",
+          id: column.id ?? column.label ?? `group-${index}`,
           columns: buildColumns(column.columns, false),
         };
       }
@@ -95,7 +95,7 @@ export function useTableState({
       // Define the base column structure
       const columnStructure = {
         ...columnHelper.accessor(column.accessor, {
-          header: column.label || "",
+          header: column.header ?? column.label ?? "",
         }),
       };
 

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

@@ -56,7 +56,7 @@
   }
 
   .bg-row-selection {
-    background-color: $info_subtle;
+    background-color: #E5EEFA;
   }
 
   .full-width {
@@ -189,6 +189,11 @@
         box-sizing: border-box !important;
       }
     }
+    // Fixes for tooltip picking up th styling from Table kit
+    .pb_tooltip_kit {
+      font-weight: unset;
+      text-transform: unset;
+    }
   }
 
   .pb_advanced_table_body {
@@ -227,7 +232,7 @@
 
       &.bg-row-selection {
         td:first-child {
-          background-color: $info_subtle;
+          background-color: #E5EEFA;
         }
       }
     }
@@ -892,6 +897,18 @@
         }
       }
     }
+    .bg-row-selection {
+      background-color: #202850;
+    }
+    .pb_advanced_table_body {
+      tr.virtualized-table-row {
+        &.bg-row-selection {
+          td:first-child {
+            background-color: #202850;
+          }
+        }
+      }
+    }
   }
 }
 

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

@@ -36,6 +36,7 @@ type AdvancedTableProps = {
   columnDefinitions: GenericObject[]
   columnGroupBorderColor?: "text_lt_default" | "text_lt_light" | "text_lt_lighter" | "text_dk_default" | "text_dk_light" | "text_dk_lighter"
   columnVisibilityControl?: GenericObject
+  customSort?:boolean;
   dark?: boolean
   data?: { [key: string]: string }
   enableToggleExpansion?: "all" | "header" | "none"
@@ -67,6 +68,7 @@ type AdvancedTableProps = {
   tableProps?: GenericObject
   toggleExpansionIcon?: string | string[]
   onRowSelectionChange?: (arg: RowSelectionState) => void
+  onCustomSortClick?: (arg: GenericObject[]) => void
   virtualizedRows?: boolean
   allowFullScreen?: boolean
   fullScreenControl?: (controls: FullscreenControls) => void
@@ -81,6 +83,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     columnDefinitions,
     columnGroupBorderColor,
     columnVisibilityControl,
+    customSort,
     dark = false,
     data = {},
     enableToggleExpansion = "header",
@@ -95,6 +98,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     maxHeight,
     onRowToggleClick,
     onToggleExpansionClick,
+    onCustomSortClick,
     pagination = false,
     paginationProps,
     pinnedRows,
@@ -325,6 +329,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             columnDefinitions={columnDefinitions}
             columnGroupBorderColor={columnGroupBorderColor}
             columnVisibilityControl={columnVisibilityControl}
+            customSort={customSort}
             enableToggleExpansion={enableToggleExpansion}
             enableVirtualization={virtualizedRows}
             expandByDepth={expandByDepth}
@@ -336,6 +341,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             isActionBarVisible={isActionBarVisible}
             isFullscreen={isFullscreen}
             loading={loading}
+            onCustomSortClick={onCustomSortClick}
             onExpandByDepthClick={onExpandByDepthClick}
             pinnedRows={pinnedRows}
             responsive={responsive}

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

@@ -12,7 +12,7 @@
       <% content.presence %>
     <% else %>
       <%= 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, 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 }) %>
+      <%= 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.rb

@@ -31,6 +31,8 @@ module Playbook
                      default: []
       prop :scroll_bar_none, type: Playbook::Props::Boolean,
                              default: false
+      prop :row_styling, type: Playbook::Props::Array,
+                         default: []
 
       def classname
         additional_classes = [responsive_classname, max_height_classname, hide_scroll_bar_class]

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

@@ -0,0 +1,65 @@
+import React from "react"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const AdvancedTableCustomSort = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      id: "year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      id: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      id: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      id: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      id: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      id: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      id: "graduatedStudents",
+      label: "Graduated Students",
+    },
+  ]
+
+//Render the subRow header rows
+const subRowHeaders = ["Quarter", "Month", "Day"]
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          customSort
+          enableToggleExpansion="all"
+          onCustomSortClick={(subrows)=>{console.log("Custom sort clicked", subrows)}}
+          tableData={MOCK_DATA}
+          {...props}
+      >
+        <AdvancedTable.Header enableSorting />
+        <AdvancedTable.Body subRowHeaders={subRowHeaders} />
+      </AdvancedTable>
+    </div>
+  )
+}
+
+export default AdvancedTableCustomSort

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

@@ -0,0 +1,5 @@
+The optional `customSort` prop can be used to add a sort button within a subrow header. The button will only appear if that subrowheader has more than one subrow nested within it. This button comes with a callback function called `onCustomSortClick`.
+
+The `onCustomSortClick` provides as an argument an array of all the subrows nested within that level of the table. 
+
+__NOTE__: `customSort` must be used in conjunction with the `subRowHeaders` prop. The `customSort` DOES NOT handle the sort logic, this must be handled on the frontend using the callback provided. 

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

@@ -0,0 +1,46 @@
+<% 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",
+    background_color: "#F9BB00",
+  },
+  {
+    row_id: "8",
+    background_color: "#0056CF",
+    font_color: "white",
+    expand_button_color: "white",
+  },
+] %>
+
+<%= pb_rails("advanced_table", props: { id: "row-styling", table_data: @table_data_with_id, column_definitions: column_definitions, row_styling: row_styling }) %>

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

@@ -0,0 +1,7 @@
+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:
+
+- `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.
+- `expand_button_color`: use this to control the color of the expand icon if needed, for example if using a darker background color.
+
+**NOTE:** Each object within the `table_data` Array must contain a unique id in order to attach an id to all Rows for this to function.

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

@@ -0,0 +1,69 @@
+import React from "react"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import Icon from "../../pb_icon/_icon"
+import Flex from "../../pb_flex/_flex"
+import Caption from "../../pb_caption/_caption"
+import Tooltip from "../../pb_tooltip/_tooltip"
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const AdvancedTableWithCustomHeader = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+      header: () => (
+        <Flex alignItems="center" 
+            justifyContent="center"
+        >
+          <Caption marginRight="xs">New Enrollments</Caption>
+          <Tooltip placement="top" 
+              text="Whoa. I'm a Tooltip" 
+              zIndex={10}
+          >
+            <Icon cursor="pointer" 
+                icon="info"
+                size="xs" 
+            />
+          </Tooltip>
+        </Flex>
+      ),
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    },
+  ];
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          tableData={MOCK_DATA}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AdvancedTableWithCustomHeader

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

@@ -0,0 +1 @@
+The optional `header` key/value pair can be used within `columnDefinitions` to render a custom header. This example shows an Icon and Tooltip being used but other kits can be used as well.

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

@@ -0,0 +1,107 @@
+import React from "react"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import Icon from "../../pb_icon/_icon"
+import Flex from "../../pb_flex/_flex"
+import Caption from "../../pb_caption/_caption"
+import Tooltip from "../../pb_tooltip/_tooltip"
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const AdvancedTableWithCustomHeaderMultiHeader = (props) => {
+
+const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      id: "year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      label: "Enrollment Data",
+      id: "enrollmentData",
+      header: () => (
+        <Flex alignItems="center" 
+            justifyContent="center"
+        >
+          <Caption marginRight="xs">Enrollments Data</Caption>
+          <Tooltip placement="top" 
+              text="Whoa. I'm a Tooltip" 
+              zIndex={10}
+          >
+            <Icon cursor="pointer" 
+                icon="info"
+                size="xs" 
+            />
+          </Tooltip>
+        </Flex>
+      ),
+      columns: [
+        {
+          label: "Enrollment Stats",
+          id: "enrollmentStats",
+          columns: [
+            {
+              accessor: "newEnrollments",
+              id: "newEnrollments",
+              label: "New Enrollments",
+            },
+            {
+              accessor: "scheduledMeetings",
+              id: "scheduledMeetings",
+              label: "Scheduled Meetings",
+            },
+          ],
+        },
+      ],
+    },
+    {
+      label: "Performance Data",
+      id: "performanceData",
+      columns: [
+        {
+          label: "Completion Metrics",
+          id: "completionMetrics",
+          columns: [
+            {
+              accessor: "completedClasses",
+              label: "Completed Classes",
+              id: "completedClasses",
+            },
+            {
+              accessor: "classCompletionRate",
+              label: "Class Completion Rate",
+              id: "classCompletionRate",
+            },
+          ],
+        },
+        {
+          label: "Attendance",
+          id: "attendance",
+          columns: [
+            {
+              accessor: "attendanceRate",
+              label: "Attendance Rate",
+              id: "attendanceRate",
+            },
+            {
+              accessor: "scheduledMeetings",
+              label: "Scheduled Meetings",
+              id: "scheduledMeetings",
+            },
+          ],
+        },
+      ],
+    },
+  ];
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          tableData={MOCK_DATA}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AdvancedTableWithCustomHeaderMultiHeader;

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

@@ -0,0 +1 @@
+The optional `header` key/value pair within `columnDefinitions` can also be used with multi headers as seen here. 

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

@@ -0,0 +1,51 @@
+<%
+  column_definitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+      header: ->(cell, label) {
+        capture do
+          pb_rails("flex", props: { align_items: "center", justify_content: "center" }) do
+            pb_rails("caption", props: { margin_right: "xs", text: "New Enrollments" }) +
+            pb_rails("icon", props: { id: "tooltip-interact", icon: "info", size: "xs" }) +
+            pb_rails("tooltip", props: {
+              trigger_element_id: "tooltip-interact",
+              tooltip_id: "example-custom-tooltip",
+              position: "top",
+              z_index: "10"
+            }) do
+              "Whoa. I'm a Tooltip"
+            end
+          end
+        end
+      }
+    },
+    {
+      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: "custom_header_table", table_data: @table_data, column_definitions: column_definitions }) %>

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

@@ -0,0 +1 @@
+The optional `header` item can be used within `column_definitions` to render a custom header. This example shows an Icon and Tooltip being used but other kits can be used as well.

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

@@ -10,23 +10,26 @@ examples:
   - advanced_table_beta_sort: Enable Sorting
   - advanced_table_responsive: Responsive Tables
   - advanced_table_custom_cell_rails: Custom Components for Cells
+  - advanced_table_with_custom_header_rails: Custom Header Cell
   - advanced_table_column_headers: Multi-Header Columns
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
-  - advanced_table_column_border_color_rails: Column Group Border Color
   - advanced_table_no_subrows: Table with No Subrows or Expansion
   - advanced_table_selectable_rows_rails: Selectable Rows
   - advanced_table_selectable_rows_no_subrows_rails: Selectable Rows (No Subrows)
   - advanced_table_selectable_rows_actions_rails: Selectable Rows (With Actions)
   - advanced_table_selectable_rows_header_rails: Selectable Rows (No Actions Bar)
   - advanced_table_scrollbar_none: Advanced Table Scrollbar None
-  # - advanced_table_column_styling_rails: Column Styling
-  # - advanced_table_column_styling_column_headers_rails: Column Styling with Multiple Headers
+  - advanced_table_row_styling: Row Styling
+  - advanced_table_column_styling_rails: Column Styling
+  - advanced_table_column_styling_column_headers_rails: Column Styling with Multiple Headers
+  - advanced_table_column_border_color_rails: Column Group Border Color
+
 
   react:
   - advanced_table_default: Default (Required Props)
-  - advanced_table_loading: Loading State
   - advanced_table_sort: Enable Sorting
   - advanced_table_sort_control: Sort Control
+  - advanced_table_custom_sort: Custom Sort
   - advanced_table_expanded_control: Expanded Control
   - advanced_table_expand_by_depth: Expand by Depth
   - advanced_table_subrow_headers: SubRow Headers
@@ -37,29 +40,32 @@ examples:
   - advanced_table_table_props_sticky_header: Sticky Header for Responsive Table
   - advanced_table_sticky_columns: Sticky Columns
   - advanced_table_sticky_columns_and_header: Sticky Columns with Sticky Header
-  - advanced_table_inline_row_loading: Inline Row Loading
   - advanced_table_responsive: Responsive Tables
   - advanced_table_custom_cell: Custom Components for Cells
+  - advanced_table_with_custom_header: Custom Header Cell
+  - advanced_table_with_custom_header_multi_header: Custom Header with Multiple Headers
   - advanced_table_pagination: Pagination
   - advanced_table_pagination_with_props: Pagination Props
+  - advanced_table_loading: Loading State
+  - advanced_table_inline_row_loading: Inline Row Loading
   - advanced_table_column_headers: Multi-Header Columns
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
   - advanced_table_column_headers_custom_cell: Multi-Header Columns with Custom Cells
-  - advanced_table_column_border_color: Column Group Border Color
   - advanced_table_no_subrows: Table with No Subrows or Expansion
+  - advanced_table_pinned_rows: Pinned Rows
   - advanced_table_selectable_rows: Selectable Rows
   - advanced_table_selectable_rows_no_subrows_react: Selectable Rows (No Subrows)
   - advanced_table_selectable_rows_actions: Selectable Rows (With Actions)
   - advanced_table_selectable_rows_header: Selectable Rows (No Actions Bar)
   - advanced_table_inline_editing: Inline Cell Editing
-  - advanced_table_fullscreen: Fullscreen
   - advanced_table_column_visibility: Column Visibility Control
   - advanced_table_column_visibility_with_state: Column Visibility Control With State
   - advanced_table_column_visibility_custom: Column Visibility Control with Custom Dropdown
   - advanced_table_column_visibility_multi: Column Visibility Control with Multi-Header Columns
-  - advanced_table_pinned_rows: Pinned Rows
   - advanced_table_scrollbar_none: Advanced Table Scrollbar None
   - advanced_table_row_styling: Row Styling
   - advanced_table_column_styling: Column Styling
   - advanced_table_column_styling_column_headers: Column Styling with Multiple Headers
+  - advanced_table_column_border_color: Column Group Border Color
+  - advanced_table_fullscreen: Fullscreen
   - advanced_table_infinite_scroll: Infinite Scroll