Playbook Design System

Collapsible Trail

collapsibleTrail is an optional prop that is set to 'true' by default. If set to 'false', it will remove the trail on the left of the rows when subRows are toggled open.

import React from "react"

import { AdvancedTable } from 'playbook-ui'
import MOCK_DATA from "./advanced_table_mock_data.json"

const AdvancedTableCollapsibleTrail = (props) => {
  const columnDefinitions = [
    {
      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",
    },
  ]

  return (
    <div>
      <AdvancedTable
          columnDefinitions={columnDefinitions}
          tableData={MOCK_DATA}
      >
        <AdvancedTable.Header />
        <AdvancedTable.Body collapsibleTrail={false} />
      </AdvancedTable>
    </div>
  )
}

export default AdvancedTableCollapsibleTrail

Row Styling

The rowStyling prop can be used in conjunction with row ids to control certain styling options on individual rows. It is an object that has several optional key/value pairs, this doc example highlights the following:

backgroundColor : use this to control the background color of the row
fontColor: use this to control font color for each row if needed, for example if using a darker background color.
expandButtonColor: 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 tableData Array must contain a unique id in order to attach an id to all Rows for this to function.

import React from "react"

import { AdvancedTable, colors } from 'playbook-ui'
import MOCK_DATA from "./advanced_table_mock_data_with_id.json"

const AdvancedTableRowStyling = (props) => {
  const columnDefinitions = [
    {
      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",
    },
  ]

const rowStyling = [
  {
    rowId: "1",
    backgroundColor: colors.warning,
  },
  {
    rowId: "8",
    backgroundColor: colors.category_1,
    fontColor: colors.white,
    expandButtonColor: colors.white,
  },
];

  return (
    <div>
      <AdvancedTable
          columnDefinitions={columnDefinitions}
          rowStyling={rowStyling}
          tableData={MOCK_DATA}
      />
    </div>
  )
}

export default AdvancedTableRowStyling

Padding Control using Row Styling

rowStyling can also be used to control padding on all cells in a given row via the use of the cellPadding key/value pair as shown here. cellPadding lets you use 'xxs', 'xs', 'sm', 'md', 'lg', 'xl' and 'none'.

import React from "react"

import { AdvancedTable } from 'playbook-ui'
import MOCK_DATA from "./advanced_table_mock_data_with_id.json"

const AdvancedTablePaddingControlPerRow = (props) => {
  const columnDefinitions = [
    {
      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",
    },
  ]

const rowStyling = [
  {
    rowId: "1",
    cellPadding:"md"
  },
];

  return (
    <div>
      <AdvancedTable
          columnDefinitions={columnDefinitions}
          rowStyling={rowStyling}
          tableData={MOCK_DATA}
      />
    </div>
  )
}

export default AdvancedTablePaddingControlPerRow

Column Styling

The columnStyling prop is an optional item that can be used within columnDefinitions as shown in the code snippet below. It is an object that has several optional key/value pairs, this doc example highlights the following:

1) headerAlignment: This will allow you to control alignment of header content which is set to right aligned by default. you can set this to left, right or center.

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.

import React from "react"

import { AdvancedTable, colors } from 'playbook-ui'

import MOCK_DATA from "./advanced_table_mock_data.json"

const AdvancedTableColumnStyling = (props) => {
  const columnDefinitions = [
    {
      accessor: "year",
      label: "Year",
      cellAccessors: ["quarter", "month", "day"],
    },
    {
      accessor: "newEnrollments",
      label: "New Enrollments",
      columnStyling:{headerAlignment: "left", cellAlignment: "left"},
    },
    {
      accessor: "scheduledMeetings",
      label: "Scheduled Meetings",
      columnStyling:{headerAlignment: "center", cellAlignment: "center"},
    },
    {
      accessor: "attendanceRate",
      label: "Attendance Rate",
    },
    {
      accessor: "completedClasses",
      label: "Completed Classes",
    },
    {
      accessor: "classCompletionRate",
      label: "Class Completion Rate",
    },
    {
      accessor: "graduatedStudents",
      label: "Graduated Students",
      columnStyling:{fontColor: colors.data_8},
    },
  ]

  return (
    <div>
      <AdvancedTable
          columnDefinitions={columnDefinitions}
          tableData={MOCK_DATA}
      />
    </div>
  )
}

export default AdvancedTableColumnStyling

Column Styling with Multiple Headers

columnStyling can also be used with the multi column logic. When used in this way, columnStyling must be used within the leaf column's columnDefinition as shown.

import React from "react";

import { AdvancedTable } from 'playbook-ui'
import MOCK_DATA from "./advanced_table_mock_data.json";

const AdvancedTableColumnStylingColumnHeaders = (props) => {
  const columnDefinitions = [
    {
      accessor: "year",
      label: "Year",
      cellAccessors: ["quarter", "month", "day"],
    },
    {
      label: "Enrollment Data",
      columns: [
        {
          label: "Enrollment Stats",
          columns: [
            {
              accessor: "newEnrollments",
              label: "New Enrollments",
              columnStyling:{headerAlignment: "left", cellAlignment: "left"},

            },
            {
              accessor: "scheduledMeetings",
              label: "Scheduled Meetings",
            },
          ],
        },
      ],
    },
    {
      label: "Performance Data",
      columns: [
        {
          label: "Completion Metrics",
          columns: [
            {
              accessor: "completedClasses",
              label: "Completed Classes",
              columnStyling:{headerAlignment: "center", cellAlignment: "center"},
            },
            {
              accessor: "classCompletionRate",
              label: "Class Completion Rate",
            },
          ],
        },
        {
          label: "Attendance",
          columns: [
            {
              accessor: "attendanceRate",
              label: "Attendance Rate",
            },
            {
              accessor: "scheduledMeetings",
              label: "Scheduled Meetings",
            },
          ],
        },
      ],
    },
  ];

  return (
    <>
      <AdvancedTable
          columnDefinitions={columnDefinitions}
          tableData={MOCK_DATA}
      />
    </>
  );
};

export default AdvancedTableColumnStylingColumnHeaders

Column Styling Background Color

The columnStyling prop can also be used to set background color for entire columns.As stated above, columnStyling is an object that has several optional key/value pairs, here are the options highlighted in this doc:

1) cellBackgroundColor: use this to control the background color of all cells in the given column
2) headerBackgroundColor: use this to control the background color of the column header
3) fontColor: use this to control font color for all cells in the given column if needed, for example if using a darker background color.
4) headerFontColor: use this to control font color for the header in the given column if needed, for example if using a darker background color.

import React from "react"

import { AdvancedTable, colors } from 'playbook-ui'

import MOCK_DATA from "./advanced_table_mock_data.json"

const AdvancedTableColumnStylingBackground = (props) => {
  const columnDefinitions = [
    {
      accessor: "year",
      label: "Year",
      cellAccessors: ["quarter", "month", "day"],
    },
    {
      accessor: "newEnrollments",
      label: "New Enrollments",
      columnStyling:{cellBackgroundColor: colors.error_subtle, headerBackgroundColor: colors.error_subtle},
    },
    {
      accessor: "scheduledMeetings",
      label: "Scheduled Meetings",
      columnStyling:{cellBackgroundColor: colors.info_subtle},
    },
    {
      accessor: "attendanceRate",
      label: "Attendance Rate",
      columnStyling:{cellBackgroundColor: colors.info, headerBackgroundColor: colors.info, fontColor: colors.white, headerFontColor: colors.white},
    },
    {
      accessor: "completedClasses",
      label: "Completed Classes",
    },
    {
      accessor: "classCompletionRate",
      label: "Class Completion Rate",
    },
    {
      accessor: "graduatedStudents",
      label: "Graduated Students",
    },
  ]

  return (
    <div>
      <AdvancedTable
          columnDefinitions={columnDefinitions}
          tableData={MOCK_DATA}
      />
    </div>
  )
}

export default AdvancedTableColumnStylingBackground

Column Styling Background Color (Custom)

cellBackgroundColor and fontColor can also accept functions for conditional styling based on row data. The function receives the row object and returns a color value.

See the code snippet below for more details.

import React from "react"

import { AdvancedTable, colors, Flex, Title, Body } from 'playbook-ui'

import MOCK_DATA from "./advanced_table_mock_data.json"

const AdvancedTableColumnStylingBackgroundCustom = (props) => {
  const columnDefinitions = [
{
      accessor: "year",
      label: "Year",
      cellAccessors: ["quarter", "month", "day"],
      customRenderer: (row, value) => (
        <Flex flexDirection="column">
          <Title size={4}
              text={value} 
          />
          <Body text="lorem ipsum" />
          <Body text="lorem ipsum" />
        </Flex>
      ), 
    },
    {
      accessor: "newEnrollments",
      label: "New Enrollments",
      columnStyling:{
        cellBackgroundColor: (row) => row.original.newEnrollments > 15 ? colors.success_subtle : colors.error_subtle,
        fontColor: (row) => row.original.newEnrollments > 15 ? colors.success : colors.error,
      },
    },
    {
      accessor: "scheduledMeetings",
      label: "Scheduled Meetings",
      columnStyling:{
        cellBackgroundColor: (row) => row.original.scheduledMeetings >= 15 ? colors.info_subtle : colors.warning_subtle
      },
    },
    {
      accessor: "attendanceRate",
      label: "Attendance Rate",
      columnStyling:{cellBackgroundColor: colors.info, headerBackgroundColor: colors.info, fontColor: colors.white, headerFontColor: colors.white},
    },
    {
      accessor: "completedClasses",
      label: "Completed Classes",
    },
    {
      accessor: "classCompletionRate",
      label: "Class Completion Rate",
    },
    {
      accessor: "graduatedStudents",
      label: "Graduated Students",
    },
  ]

  return (
    <div>
      <AdvancedTable
          columnDefinitions={columnDefinitions}
          tableData={MOCK_DATA}
      />
    </div>
  )
}

export default AdvancedTableColumnStylingBackgroundCustom

Column Styling Background Color with Multiple Headers

The columnStyling prop can also be used to set background color for entire columns for the multi header variant as well.

It should be noted that headerFontColor and headerBackgroundColor in the multi header variant will only apply to the immediate header for the given column as shown here.

import React from "react"

import { AdvancedTable, colors } from 'playbook-ui'

import MOCK_DATA from "./advanced_table_mock_data.json"

const AdvancedTableColumnStylingBackgroundMulti = (props) => {
  const columnDefinitions = [
    {
      accessor: "year",
      label: "Year",
      cellAccessors: ["quarter", "month", "day"],
    },
    {
      label: "Enrollment Data",
      columns: [
        {
          label: "Enrollment Stats",
          columns: [
            {
              accessor: "newEnrollments",
              label: "New Enrollments",
              columnStyling:{cellBackgroundColor: colors.error_subtle, headerBackgroundColor: colors.error_subtle},
            },
            {
              accessor: "scheduledMeetings",
              label: "Scheduled Meetings",
            },
          ],
        },
      ],
    },
    {
      label: "Performance Data",
      columns: [
        {
          label: "Completion Metrics",
          columns: [
            {
              accessor: "completedClasses",
              label: "Completed Classes",
              columnStyling:{cellBackgroundColor: colors.info, headerBackgroundColor: colors.info, fontColor: colors.white, headerFontColor: colors.white},
            },
            {
              accessor: "classCompletionRate",
              label: "Class Completion Rate",
            },
          ],
        },
        {
          label: "Attendance",
          columns: [
            {
              accessor: "attendanceRate",
              label: "Attendance Rate",
              columnStyling:{cellBackgroundColor: colors.info_subtle},
            },
            {
              accessor: "scheduledMeetings",
              label: "Scheduled Meetings",
            },
          ],
        },
      ],
    },
  ];

  return (
    <div>
      <AdvancedTable
          columnDefinitions={columnDefinitions}
          tableData={MOCK_DATA}
      />
    </div>
  )
}

export default AdvancedTableColumnStylingBackgroundMulti

Padding Control using Column Styling

columnStyling can also be used to control padding on all cells in a given column via the use of the cellPadding key/value pair. cellPadding lets you use 'xxs', 'xs', 'sm', 'md', 'lg', 'xl' and 'none'.

This control can be used in conjunction with the customRenderer item within each columnDefinition to achieve custom background colors for individual cells as seen here. Use fontColor to achieve better contrast between cell content and background for darker backgrounds.

import React from "react"

import { AdvancedTable, Background } from 'playbook-ui'

import MOCK_DATA from "./advanced_table_mock_data_with_id.json"

const AdvancedTablePaddingControl = (props) => {
  const columnDefinitions = [
    {
      accessor: "year",
      label: "Year",
      cellAccessors: ["quarter", "month", "day"],
    },
    {
      accessor: "newEnrollments",
      label: "New Enrollments",
      columnStyling:{cellPadding: "none"},
      customRenderer: (row, value) => (
        <Background 
            backgroundColor={row.original.newEnrollments > 20 ? "success_secondary" : "warning_secondary"}
            padding="xs" 
        >
         {value}
        </Background>
      ), 
    },
    {
      accessor: "scheduledMeetings",
      label: "Scheduled Meetings",
    },
    {
      accessor: "attendanceRate",
      label: "Attendance Rate",
    },
    {
      accessor: "completedClasses",
      label: "Completed Classes",
    },
    {
      accessor: "classCompletionRate",
      label: "Class Completion Rate",
      columnStyling:{cellPadding: "none", fontColor: "white"},
      customRenderer: (row, value) => (
        <Background 
            backgroundColor={"category_1"}
            padding="xs" 
        >
         {value}
        </Background>
      ), 
    },
    {
      accessor: "graduatedStudents",
      label: "Graduated Students",
    },
  ]

  return (
    <div>
      <AdvancedTable
          columnDefinitions={columnDefinitions}
          tableData={MOCK_DATA}
      />
    </div>
  )
}

export default AdvancedTablePaddingControl

Column Group Border Color

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.

import React from "react"

import { AdvancedTable } from 'playbook-ui'
import MOCK_DATA from "./advanced_table_mock_data.json"

const AdvancedTableColumnBorderColors = (props) => {
  const columnDefinitions = [
    {
      accessor: "year",
      label: "Year",
      cellAccessors: ["quarter", "month", "day"],
    },
    {
      label: "Enrollment Data",
      columns: [
        {
          label: "Enrollment Stats",
          columns: [
            {
              accessor: "newEnrollments",
              label: "New Enrollments",
            },
            {
              accessor: "scheduledMeetings",
              label: "Scheduled Meetings",
            },
          ],
        },
      ],
    },
    {
      label: "Performance Data",
      columns: [
        {
          label: "Completion Metrics",
          columns: [
            {
              accessor: "completedClasses",
              label: "Completed Classes",
            },
            {
              accessor: "classCompletionRate",
              label: "Class Completion Rate",
            },
          ],
        },
        {
          label: "Attendance",
          columns: [
            {
              accessor: "attendanceRate",
              label: "Attendance Rate",
            },
            {
              accessor: "scheduledMeetings",
              label: "Scheduled Meetings",
            },
          ],
        },
      ],
    },
  ];

  const tableProps = {
    verticalBorder: true
  }

  return (
    <>
      <AdvancedTable
          columnDefinitions={columnDefinitions}
          columnGroupBorderColor="text_lt_default"
          tableData={MOCK_DATA}
          tableProps={tableProps}
      />
    </>
  )
}

export default AdvancedTableColumnBorderColors

Advanced Table

Styling

Available Props

Contribute to Playbook

Power

Connect