Playbook Design System

Enable Sorting

the enableSorting prop is a boolean prop set to false by default. If true, the table will add sort logic linked to the sort button in the header. Clicking the sort button will toggle sort between ascending and descending. Currently this sort functionality is only available on the first column.

sortIcon

An optional prop, sortIcon allows you to customize your icon sets by passing it an array of any comma-separated pair of icon values. The first icon value will replace the kit's default icon when sort direction is desc, and the second value will replace the default icon when sort direction is asc. sortIcon also allows you to pass it a single icon as a string, in which case the icon will not toggle with the sort state. Default for this prop is ["arrow-up-wide-short", "arrow-down-short-wide"]. All strings must be valid FA icons.

import React from "react"

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

const AdvancedTableSort = (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 enableSorting />
        <AdvancedTable.Body />
      </AdvancedTable>
    </div>
  )
}

export default AdvancedTableSort

Sort Control

sortControl is an optional prop that can be used to gain greater control over the sort state of the Advanced Table. Tanstack handles sort itself, however it does provide for a way to handle the state manually if needed. Usecases for this include needing to store the sort state so it persists on page reload, set an initial sort state, etc.

The sort state must be an object with a single key/value pair, with the key being "desc" and the value being a boolean. The default for sort direction is desc: true.

import React, { useState } from "react"

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

const AdvancedTableSortControl = (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",
    },
  ]

  //State for sort direction
  const [isSortDesc, setIsSortDesc] = useState({desc: false})

  // //Passing sort state to AdvancedTable as prop
  const sortControl = {
    value: isSortDesc,
    onChange: setIsSortDesc,
  }

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

export default AdvancedTableSortControl

Enable Sort By Column

Sorting can now be enabled on any of the columns. To do this, add enableSort:true to the columnDefinition of the column you want sorting enabled on. Once enabled, clicking on the header will toggle sort between ascending and descending.

The optional enableSortingRemoval prop can also be used in conjunction with sorting functionality. This prop is set to 'false' by default but if set to 'true' sorting order will circle like: 'none' -> 'desc' -> 'asc' -> 'none' -> ...
It is recommended that enableSortingRemoval be set to 'true' when sort is enabled on mutiple columns so that sorting direction is always clear via the sort icon.

NOTE: For sort on the first column, continue to use the separate enableSorting prop on AdvancedTable.Header as shown here.

import React from "react"

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

const AdvancedTableSortPerColumn = (props) => {
  const columnDefinitions = [
    {
      accessor: "year",
      label: "Year",
      cellAccessors: ["quarter", "month", "day"],
    },
    {
      accessor: "newEnrollments",
      label: "New Enrollments",
      enableSort: true,
    },
    {
      accessor: "scheduledMeetings",
      label: "Scheduled Meetings",
    },
    {
      accessor: "attendanceRate",
      label: "Attendance Rate",
      enableSort: true,
    },
    {
      accessor: "completedClasses",
      label: "Completed Classes",
    },
    {
      accessor: "classCompletionRate",
      label: "Class Completion Rate",
    },
    {
      accessor: "graduatedStudents",
      label: "Graduated Students",
    },
  ]

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

export default AdvancedTableSortPerColumn;

Enable Sort By Column (Multi-Column)

Sorting on columns can also be applied to columns when using the multi-header variant, however in this case sorting can only be set on leaf columns NOT on parent columns.

import React from "react"

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

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

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

export default AdvancedTableSortPerColumnForMultiColumn;

Custom Sort

The optional customSort prop can be used to add a sort button within a subrow header. The button will only appear if that subrowheader has more than one subrow nested within it. This button comes with a callback function called onCustomSortClick.

The onCustomSortClick provides as an argument an array of all the subrows nested within that level of the table.

NOTE: customSort must be used in conjunction with the subRowHeaders prop. The customSort DOES NOT handle the sort logic, this must be handled on the frontend using the callback provided.

import React from "react"

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

const AdvancedTableCustomSort = (props) => {
  const columnDefinitions = [
    {
      accessor: "year",
      label: "Year",
      id: "year",
      cellAccessors: ["quarter", "month", "day"],
    },
    {
      accessor: "newEnrollments",
      id: "newEnrollments",
      label: "New Enrollments",
    },
    {
      accessor: "scheduledMeetings",
      id: "scheduledMeetings",
      label: "Scheduled Meetings",
    },
    {
      accessor: "attendanceRate",
      id: "attendanceRate",
      label: "Attendance Rate",
    },
    {
      accessor: "completedClasses",
      id: "completedClasses",
      label: "Completed Classes",
    },
    {
      accessor: "classCompletionRate",
      id: "classCompletionRate",
      label: "Class Completion Rate",
    },
    {
      accessor: "graduatedStudents",
      id: "graduatedStudents",
      label: "Graduated Students",
    },
  ]

//Render the subRow header rows
const subRowHeaders = ["Quarter", "Month", "Day"]

  return (
    <div>
      <AdvancedTable
          columnDefinitions={columnDefinitions}
          customSort
          enableToggleExpansion="all"
          onCustomSortClick={(subrows)=>{console.log("Custom sort clicked", subrows)}}
          tableData={MOCK_DATA}
      >
        <AdvancedTable.Header enableSorting />
        <AdvancedTable.Body subRowHeaders={subRowHeaders} />
      </AdvancedTable>
    </div>
  )
}

export default AdvancedTableCustomSort

Sort Parent Only

The sortParentOnly prop is a boolean set to false by default. When set to true, only parent (depth-0) rows are re-ordered when sorting; children and grandchildren stay grouped under their parent and keep their original order.

sortParentOnly works with every sorting mode: enableSorting on the header, per-column enableSort: true, and sortable leaf columns in the multi-header variant. Sort indicators behave as usual.

When omitted or false, sorting applies to all levels.

import React from "react"

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

const sharedColumnDefinitions = [
  {
    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 sortByColumnDefinitions = [
  {
    accessor: "year",
    label: "Year",
    cellAccessors: ["quarter", "month", "day"],
  },
  {
    accessor: "newEnrollments",
    label: "New Enrollments",
    enableSort: true,
  },
  {
    accessor: "scheduledMeetings",
    label: "Scheduled Meetings",
  },
  {
    accessor: "attendanceRate",
    label: "Attendance Rate",
    enableSort: true,
  },
  {
    accessor: "completedClasses",
    label: "Completed Classes",
  },
  {
    accessor: "classCompletionRate",
    label: "Class Completion Rate",
  },
  {
    accessor: "graduatedStudents",
    label: "Graduated Students",
  },
]

const sortByColumnMultiDefinitions = [
  {
    accessor: "year",
    label: "Year",
    cellAccessors: ["quarter", "month", "day"],
  },
  {
    label: "Enrollment Data",
    columns: [
      {
        label: "Enrollment Stats",
        columns: [
          {
            accessor: "newEnrollments",
            label: "New Enrollments",
            enableSort: true,
          },
          {
            accessor: "scheduledMeetings",
            label: "Scheduled Meetings",
          },
        ],
      },
    ],
  },
  {
    label: "Performance Data",
    columns: [
      {
        label: "Completion Metrics",
        columns: [
          {
            accessor: "completedClasses",
            label: "Completed Classes",
            enableSort: true,
          },
          {
            accessor: "classCompletionRate",
            label: "Class Completion Rate",
          },
        ],
      },
      {
        label: "Attendance",
        columns: [
          {
            accessor: "attendanceRate",
            label: "Attendance Rate",
          },
          {
            accessor: "scheduledMeetings",
            label: "Scheduled Meetings",
          },
        ],
      },
    ],
  },
]

const AdvancedTableSortParentOnly = (props) => {
  return (
    <div>
      <Caption text="Enable Sorting (first column) + sortParentOnly" />
      <AdvancedTable
          columnDefinitions={sharedColumnDefinitions}
          sortParentOnly
          tableData={MOCK_DATA}
      >
        <AdvancedTable.Header enableSorting />
        <AdvancedTable.Body />
      </AdvancedTable>
      <Caption marginTop="md" 
          text="Sort by column + sortParentOnly"
      />
      <AdvancedTable
          columnDefinitions={sortByColumnDefinitions}
          enableSortingRemoval
          sortParentOnly
          tableData={MOCK_DATA}
      >
        <AdvancedTable.Header />
        <AdvancedTable.Body />
      </AdvancedTable>
      <Caption marginTop="md" 
          text="Sort by column (multi-column) + sortParentOnly"
      />
      <AdvancedTable
          columnDefinitions={sortByColumnMultiDefinitions}
          enableSortingRemoval
          sortParentOnly
          tableData={MOCK_DATA}
      >
        <AdvancedTable.Header enableSorting />
        <AdvancedTable.Body />
      </AdvancedTable>
    </div>
  )
}

export default AdvancedTableSortParentOnly

Advanced Table

Sorting

sortIcon

Available Props

Contribute to Playbook

Power

Connect