playbook_ui 14.6.2.pre.alpha.PBNTR633dropdownavailablepropstable4380 → 14.6.2.pre.alpha.PBNTR666advancedtablefirstcolumn4406

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2150b988f879193d665933bcff4a30e8da5ce3b01d92f9b647521594520306ac
-  data.tar.gz: 7023762038f258f24a3699ad06e2dc2f05c600de89cbce803b569aecb7da9f31
+  metadata.gz: dba166f4d1d79b3c8a653c6cbd2f651b2d45ff4433ddd0eeee0372e3f6b38eca
+  data.tar.gz: f5e0af7845810066fe7c8562b3ff17806aad72e02eaae9e5e2b22394f1cc54b2
 SHA512:
-  metadata.gz: d96de439d140f402f0f7d09483ac2278133f633303c5fed4e15c00748ece77053751874cc0b28a29797e4070e34e762ee32c2aa099ff306556be184a69014044
-  data.tar.gz: 17a2d95ea8a35b7dedb4dc48746a82a02abfb93c6211f8caa9bd6716a364c0b443590f0f3be8d1316d93d392b260375d80d0811da8ae2f6d9126b244a8527d47
+  metadata.gz: f82455bc51c6223115c2436793824a3c602ca7ec81b88c328a3e92f82992781b81cbeb81d53057a7af3588b814d4daa672e5c69f9a4a1861e7722dd051b676ab
+  data.tar.gz: 5c81b68981cdc6611fcb3e4c0ce8091ef4d2b627f5982e73a826f94e15e74d037b34812c7439dcd1769714b3b34f5bf10bfbfb4135e920dbefa34b3fcc0e70ec

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

@@ -16,6 +16,7 @@ interface CustomCellProps {
   onRowToggleClick?: (arg: Row<GenericObject>) => void
   row: Row<GenericObject>
   value?: string
+  customRenderer?: (row: Row<GenericObject>, value: string | undefined) => React.ReactNode
 } 
 
 export const CustomCell = ({
@@ -23,6 +24,7 @@ export const CustomCell = ({
   onRowToggleClick,
   row,
   value,
+  customRenderer,
 }: CustomCellProps & GlobalProps) => {
   const { setExpanded, expanded, expandedControl, inlineRowLoading } = useContext(AdvancedTableContext);
 
@@ -61,7 +63,12 @@ export const CustomCell = ({
           </button>
         ) : null}
         <FlexItem paddingLeft={renderButton? "none" : "xs"}>
-          {row.depth === 0 ? getValue() : value}
+          {row.depth === 0 ? (
+            customRenderer ? customRenderer(row, getValue()) : getValue()
+           ) :(
+            customRenderer ? customRenderer(row, value) : value
+           )
+           }
         </FlexItem>
       </Flex>
     </div>

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

@@ -90,8 +90,8 @@ const AdvancedTable = (props: AdvancedTableProps) => {
 
   const columnHelper = createColumnHelper()
 
-  //Create cells for first columns
-  const createCellFunction = (cellAccessors: string[], customRenderer?: (row: Row<GenericObject>, value: any) => JSX.Element) => {
+  //Create cells for columns, with customization for first column
+  const createCellFunction = (cellAccessors: string[], customRenderer?: (row: Row<GenericObject>, value: any) => JSX.Element, index?: number) => {
     const columnCells = ({
       row,
       getValue,
@@ -101,19 +101,16 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     }) => {
       const rowData = row.original
 
-    // Use customRenderer if provided, otherwise default rendering
-    if (customRenderer) {
-      return customRenderer(row, getValue())
-    }
-
+    if (index === 0) {
       switch (row.depth) {
         case 0: {
           return (
-            <CustomCell
-                getValue={getValue}
-                onRowToggleClick={onRowToggleClick}
-                row={row}
-            />
+                <CustomCell
+                    customRenderer={customRenderer}
+                    getValue={getValue}
+                    onRowToggleClick={onRowToggleClick}
+                    row={row}
+                />
           )
         }
         default: {
@@ -122,6 +119,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
           const accessorValue = rowData[depthAccessor]
           return accessorValue ? (
             <CustomCell
+                customRenderer={customRenderer}
                 onRowToggleClick={onRowToggleClick}
                 row={row} 
                 value={accessorValue} 
@@ -132,11 +130,14 @@ const AdvancedTable = (props: AdvancedTableProps) => {
         }
       }
     }
-
+    return customRenderer
+    ? customRenderer(row, getValue())
+    : getValue()
+    }
     return columnCells
   }
-
-  //Create column array in format needed by Tanstack
+ 
+//   //Create column array in format needed by Tanstack
   const columns =
     columnDefinitions &&
       columnDefinitions.map((column, index) => {
@@ -147,19 +148,12 @@ const AdvancedTable = (props: AdvancedTableProps) => {
         }),
       }
 
-  // Use the custom renderer if provided, EXCEPT for the first column
-  if (index !== 0) {
-    if (column.cellAccessors || column.customRenderer) {
-      columnStructure.cell = createCellFunction(
-        column.cellAccessors,
-        column.customRenderer
-      )
-    }
-  } else {
-    // For the first column, apply createCellFunction without customRenderer
-    if (column.cellAccessors) {
-      columnStructure.cell = createCellFunction(column.cellAccessors)
-    }
+  if (column.cellAccessors || column.customRenderer) {
+    columnStructure.cell = createCellFunction(
+      column.cellAccessors,
+      column.customRenderer,
+      index
+    )
   }
 
   return columnStructure

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

@@ -1,7 +1,7 @@
 import React, {useState} from "react"
 import { render, screen, waitFor } from "../utilities/test-utils"
 
-import { AdvancedTable } from "playbook-ui"
+import { AdvancedTable, Pill } from "playbook-ui"
 
 const MOCK_DATA = [
   {
@@ -88,6 +88,28 @@ const columnDefinitions = [
   },
 ]
 
+const columnDefinitionsCustomRenderer = [
+  {
+    accessor: "year",
+    label: "Year",
+    cellAccessors: ["quarter", "month", "day"],
+  },
+  {
+    accessor: "newEnrollments",
+    label: "New Enrollments",
+    customRenderer: (row, value) => (
+      <Pill text={value} 
+          variant="success"    
+      />
+    ),
+  },
+  {
+    accessor: "scheduledMeetings",
+    label: "Scheduled Meetings",
+  },
+]
+
+
 const subRowHeaders = ["Quarter"]
 
 const testId = "advanced_table"
@@ -463,3 +485,17 @@ test("responsive none prop functions as expected", () => {
   const kit = screen.getByTestId(testId)
   expect(kit).toHaveClass("pb_advanced_table table-responsive-none")
 })
+
+test("customRenderer prop functions as expected", () => {
+  render(
+    <AdvancedTable
+        columnDefinitions={columnDefinitionsCustomRenderer}
+        data={{ testid: testId }}
+        tableData={MOCK_DATA}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const pill = kit.querySelector(".pb_pill_kit_success_lowercase")
+  expect(pill).toBeInTheDocument()
+})

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

@@ -1,5 +1,5 @@
 import React from "react"
-import { AdvancedTable, Pill, Body, Flex, Detail, Caption } from "playbook-ui"
+import { AdvancedTable, Pill, Body, Flex, Detail, Caption, Badge, Title } from "playbook-ui"
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableCustomCell = (props) => {
@@ -8,7 +8,18 @@ const AdvancedTableCustomCell = (props) => {
       accessor: "year",
       label: "Year",
       cellAccessors: ["quarter", "month", "day"],
-
+      customRenderer: (row, value) => (
+        <Flex>
+          <Title size={4}
+              text={value} 
+          />
+          <Badge 
+              marginLeft="sm"
+              text={row.original.newEnrollments > 20 ? "High" : "Low"}
+              variant="neutral"
+          />
+        </Flex>
+      ), 
     },
     {
       accessor: "newEnrollments",

data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx

@@ -47,7 +47,7 @@ interface DropdownComponent
     Container: typeof DropdownContainer;
 }
 
-let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
+const Dropdown = forwardRef((props: DropdownProps, ref: any) => {
     const {
         aria = {},
         autocomplete = false,
@@ -260,7 +260,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                             <DropdownContainer>
                                 {optionsWithBlankSelection &&
                                     optionsWithBlankSelection?.map((option: GenericObject) => (
-                                        <DropdownOption key={option.id}
+                                        <Dropdown.Option key={option.id}
                                             option={option}
                                         />
                                     ))}
@@ -278,12 +278,11 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
             </DropdownContext.Provider>
         </div>
     )
-}
+}) as DropdownComponent
 
-Dropdown = forwardRef(Dropdown) as unknown as DropdownComponent;
-(Dropdown as DropdownComponent).displayName = "Dropdown";
-(Dropdown as DropdownComponent).Option = DropdownOption;
-(Dropdown as DropdownComponent).Trigger = DropdownTrigger;
-(Dropdown as DropdownComponent).Container = DropdownContainer;
+Dropdown.displayName = "Dropdown";
+Dropdown.Option = DropdownOption;
+Dropdown.Trigger = DropdownTrigger;
+Dropdown.Container = DropdownContainer;
 
 export default Dropdown;