From d13622aeaf72787b9c9fc173e631400b44b87062 Mon Sep 17 00:00:00 2001 From: Nida Ghuman Date: Thu, 7 Nov 2024 13:50:46 -0500 Subject: [PATCH] [PBNTR-666] Custom Cells for Advanced Table First Column (#3889) [Runway Story](https://runway.powerhrg.com/backlog_items/PBNTR-666) - This story adds the ability to have custom cells for the first column of the advanced table. - This functionality was added for the rest of the columns on [this PR](https://github.com/powerhome/playbook/pull/3821) - To test, scroll down to the last doc example on the React side [csb here](https://codesandbox.io/p/sandbox/advanced-table-custom-cell-gjzxtw) --------- Co-authored-by: Jasper Furniss --- .../Components/CustomCell.tsx | 9 +++- .../pb_advanced_table/_advanced_table.tsx | 49 ++++++++----------- .../pb_advanced_table/advanced_table.test.jsx | 38 +++++++++++++- .../docs/_advanced_table_custom_cell.jsx | 15 +++++- 4 files changed, 79 insertions(+), 32 deletions(-) diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx b/playbook/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx index ad90a37419..31625a9781 100644 --- a/playbook/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx +++ b/playbook/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx @@ -16,6 +16,7 @@ interface CustomCellProps { onRowToggleClick?: (arg: Row) => void row: Row value?: string + customRenderer?: (row: Row, 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 = ({ ) : null} - {row.depth === 0 ? getValue() : value} + {row.depth === 0 ? ( + customRenderer ? customRenderer(row, getValue()) : getValue() + ) :( + customRenderer ? customRenderer(row, value) : value + ) + } diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx b/playbook/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx index 52b0c7fcf4..8ae25edbfd 100644 --- a/playbook/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +++ b/playbook/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, value: any) => JSX.Element) => { + //Create cells for columns, with customization for first column + const createCellFunction = (cellAccessors: string[], customRenderer?: (row: Row, 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 ( - + ) } default: { @@ -122,6 +119,7 @@ const AdvancedTable = (props: AdvancedTableProps) => { const accessorValue = rowData[depthAccessor] return accessorValue ? ( { } } } - + 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 +147,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 diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx b/playbook/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx index 2cb8a51674..7165f218d4 100644 --- a/playbook/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +++ b/playbook/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) => ( + + ), + }, + { + 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( + + ) + + const kit = screen.getByTestId(testId) + const pill = kit.querySelector(".pb_pill_kit_success_lowercase") + expect(pill).toBeInTheDocument() +}) \ No newline at end of file diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.jsx b/playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.jsx index b1c5bad58d..78b586bdf7 100644 --- a/playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.jsx +++ b/playbook/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) => ( + + + <Badge dark + marginLeft="xxs" + text={row.original.newEnrollments > 20 ? "High" : "Low"} + variant="neutral" + /> + </Flex> + ), }, { accessor: "newEnrollments",