playbook_ui 15.3.0 → 15.4.0.pre.alpha.PLAY2429datepickeropenonscreenstatic12263

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3f3bcdbcc1fd21a5a1c2dcfb9b4729614728a90c458c3c58cc4df87c6a25e911
-  data.tar.gz: bf422ecb0c0881adac709a8007f55798576092e0208a17732162e224ca89cd5a
+  metadata.gz: '078ba558616f3d9652e67f43a347d3d8aefc110aa2d508a5733bd795b067c11c'
+  data.tar.gz: fa53a9d154f6087f72bd482dc68d75e152a25f59e156ca477afd7f9cadf2984f
 SHA512:
-  metadata.gz: c12bfb4a0e31455322beaba9d339fcc7fe1ee8cca4492ba815d042041a3059edbd95c2f33872f38f945778bcbf797de6402c732d135e29853c9cd8f253b2bd71
-  data.tar.gz: 0ca98ffa013274333fec88262766d99a01840cc0998b3ea710ce85991a00576c8c0007ed3d8c5dbee252a77f6b112ae2c2286208d5a0288167f85e4a57e1b90e
+  metadata.gz: 1f55d101f6dd2a8069ed1e2b4ff753360fc2f03242d3c6978a18789d41dca270a8f13286cc74a57ab8565d6fb7e4c58ef75e769206ff8a2ee2b45c21f091afbd
+  data.tar.gz: c0e5da234a64692508e34ace0559178733de1e0703cb553fdf0c1c61901d1332e9dc4074b5d895d08b157b2c35f5976103d94acd145a3189bfe51826e7bda940

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

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

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

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

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,42 @@ 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, inlineRowLoading, paginationProps?.pageIndex, paginationProps?.pageSize]);
+
+  // Call the callback with the new page index when localPagination.pageIndex changes (with inlineRowLoading)
+  useEffect(() => {
+    if (pagination && inlineRowLoading && paginationProps?.onPageChange) {
+      paginationProps.onPageChange(localPagination.pageIndex);
+    }
+  }, [localPagination.pageIndex, pagination, inlineRowLoading, paginationProps]);
+
+  // Call the callback with the new page index when localPagination.pageIndex changes (without inlineRowLoading)
+  useEffect(() => {
+    if (pagination && !inlineRowLoading && paginationProps?.onPageChange) {
+      const currentPageIndex = table.getState().pagination.pageIndex;
+      paginationProps.onPageChange(currentPageIndex);
     }
-  }, [pagination, paginationProps?.pageSize, table]);
+  }, [table.getState().pagination.pageIndex, pagination, inlineRowLoading, paginationProps]);
 
   // Check if table has any sub-rows
   const hasAnySubRows = table.getRowModel().rows.some(row => row.subRows && row.subRows.length > 0);
@@ -247,6 +302,8 @@ export function useTableState({
     rowSelection,
     fullData,
     totalFetched,
-    isFetching
+    isFetching,
+    localPagination,
+    setLocalPagination
   };
 }

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

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

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

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

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

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

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

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

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

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

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

@@ -26,6 +26,10 @@
     {
       accessor: "classCompletionRate",
       label: "Class Completion Rate",
+      column_styling: { 
+        cell_background_color: "category_1",
+        font_color: "white"
+      }
     },
     {
       accessor: "graduatedStudents",

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

@@ -1 +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.
+`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. Use `font_color` to achieve better contrast between cell content and background for darker backgrounds.

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

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

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

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

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

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

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

@@ -4,4 +4,6 @@ The `columnStyling` prop is an optional item that can be used within `columnDefi
 
 2) `cellAlignment`: This will allow you to control alignment of content within all cells in the given column. This is set to right aligned by default. you can set this to `left`, `right` or `center`.
 
+3) `fontColor`: This will allow you to control the font color for a given column.
+
 `columnStyling` can be used within the columnDefinition of all the columns or some of them, as shown. Each column has its own individual control in this way. 

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

@@ -1,5 +1,5 @@
 import React from "react";
-import AdvancedTable from '../../pb_advanced_table/_advanced_table';
+import { AdvancedTable } from "playbook-ui";
 import MOCK_DATA from "./advanced_table_mock_data.json";
 
 const AdvancedTableColumnStylingColumnHeaders = (props) => {

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

@@ -29,6 +29,7 @@
     {
       accessor: "graduatedStudents",
       label: "Graduated Students",
+      column_styling: { font_color: "red" }
     }
 ] %>
 

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

@@ -4,4 +4,6 @@ The `column_styling` prop is an optional item that can be used within `column_de
 
 2) `cell_alignment`: This will allow you to control alignment of content within all cells in the given column. This is set to right aligned by default. you can set this to `left`, `right` or `center`.
 
+3) `font_color`: This will allow you to control the font color for a given column.
+
 `column_styling` can be used within the column_definition of all the columns or some of them, as shown. Each column has its own individual control in this way.