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 0f755a0096..0d27e5fbad 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 @@ -91,7 +91,7 @@ const AdvancedTable = (props: AdvancedTableProps) => { const columnHelper = createColumnHelper() //Create cells for columns, with customization for first column - const createCellFunction = (cellAccessors: string[], customRenderer?: (row: Row, value: any) => JSX.Element, index:number) => { + const createCellFunction = (cellAccessors: string[], customRenderer?: (row: Row, value: any) => JSX.Element, index?: number) => { const columnCells = ({ row, getValue, 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