Data Visualization

Map

Default

This kit provides a wrapping class to place around the MapLibre library. Complete docs for using the library can be found here.

Basic setup to start using MapLibre:

Install the npm package using yarn add maplibre-gl
To include the maplibre css, include a link to the CSS file as a CDN in your stylesheet using the following syntax: @import url("https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css"); OR include it as a link in the tag <link href='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css' rel='stylesheet' />
You can now use MapLibre within the Map Kit as shown in this example.

Notes :

To enable custom buttons, set zoomBtns and flyTo to true and pass in zoomInClick, zoomOutClick and flyToClick as shown in this doc example.
Use mapTheme.marker to set the Marker color.
To use Maplibre, you must also set a height and width to the containing div (.pb_map) and set position to 'relative'.
scrollZoom has been disabled in these doc examples for page usability

import React, { useRef, useEffect, useState } from 'react'

import { Map, mapTheme } from 'playbook-ui'

import maplibregl from 'maplibre-gl'

const MapDefault = (props) => {

  //set Map instance to access from outside useEffect
  const [mapInstance, setMapInstance] = useState(null)
  const mapContainerRef = useRef(null)

  //Set default position
  const defaultPosition = [-75.379143, 39.831200]

  // linking Maplibre methods to PB custom zoom in, zoom out, and fly to buttons
  const handleZoomIn = (map) => {map.zoomIn({...mapTheme.zoomConfig})}
  const handleZoomOut = (map) => {map.zoomOut({...mapTheme.zoomConfig})}
  const handleFlyTo = (map) => {map.flyTo({
                                center: defaultPosition,
                                ... mapTheme.flyToConfig
                                });}

  //This function is called by the useEffect when map instance first loads
  const loadMap = ( { target: map }) => {
        //set marker/pin
        new maplibregl.Marker({
          color: mapTheme.marker,
        }).setLngLat(defaultPosition)
        .setPopup(new maplibregl.Popup({closeButton: false}).setHTML(`<h4 class="pb_title_kit_size_4">Hello World!</h4>`)) // add popup
        .addTo(map);

        // disable map zoom when using scroll
        map.scrollZoom.disable();
        
        //add attributioncontrols
        map.addControl(new maplibregl.AttributionControl({
          compact: true
          }));

        //set map instance
        setMapInstance(map)
  }

    useEffect(() => {
         new maplibregl.Map({
            container: mapContainerRef.current,
            center: defaultPosition,
            ...mapTheme.mapConfig
        }).on('load', loadMap)

    }, [])

return ( 
  <Map flyTo
      flyToClick={()=> {handleFlyTo(mapInstance)}}
      zoomBtns
      zoomInClick={() => {handleZoomIn(mapInstance)}}
      zoomOutClick={()=> {handleZoomOut(mapInstance)}}
  >
       <div
           ref={mapContainerRef}
           style={{
              position: 'absolute',
              left: 0,
              right: 0,
              top: 0, 
              bottom: 0,
           }}
       />
    </Map>
)
}

export default MapDefault

Map With Polygon Draw Plugin

Various plugins are available for use with MapLibre, one of which is the mapbox-gl-draw. This plugin is recommended by MapLibre if you need to add the functionality of drawing polygons on the map.

To test this tool:

Click the "draw box" icon to activate the polygon tool
Click on a spot on the map to start drawing
Continue clicking to create new points, defining the boundaries of the polygon
Press enter or re-click the first point to finish the polygon
Once drawn, polygons can be selected on click and then moved, by dragging-and-dropping the entire shape; resized, by dragging-and-dropping any boundary point(s); or deleted, by clicking the "trash" button.

import React, { useRef, useEffect, useState } from 'react'

import { Map, mapTheme } from 'playbook-ui'

import maplibregl from 'maplibre-gl'
import MapboxDraw from "@mapbox/mapbox-gl-draw";

const MapWithPlugin = (props) => {
    //set Map instance to access from outside useEffect
    const [mapInstance, setMapInstance] = useState(null)
    const mapContainerRef = useRef(null)

      //Set default position
    const defaultPosition = [-75.379143, 39.831200]

    // linking Maplibre methods to PB custom zoom in, zoom out, and fly to buttons
  const handleZoomIn = (map) => {map.zoomIn({...mapTheme.zoomConfig})}
  const handleZoomOut = (map) => {map.zoomOut({...mapTheme.zoomConfig})}
  const handleFlyTo = (map) => {map.flyTo({
                                center: defaultPosition,
                                ... mapTheme.flyToConfig
                                });}

    //This function should contain all maplibre related code
    const loadMap = ( { target: map }) => {
        //set marker/pin
        new maplibregl.Marker({
          color: mapTheme.marker,
        }).setLngLat(defaultPosition)
        .setPopup(new maplibregl.Popup({className: 'map_popup', closeButton: false}).setHTML(`<h4 class="pb_title_kit_size_4">Hello World!</h4>`)) // add popup
        .addTo(map);

        //add maplibre default zoom controls
        // map.addControl(new maplibregl.NavigationControl({showCompass: false}))

        // disable map zoom when using scroll
        map.scrollZoom.disable();

        //Add polygon draw button using map-box-gl-draw plugin
        var draw = new MapboxDraw({
            displayControlsDefault: false,
            controls: {
            polygon: true,
            trash: true
            }
            });
            map.addControl(draw);

        //add attributioncontrols
        map.addControl(new maplibregl.AttributionControl({
            compact: true
        }));
          
        //set map instance
        setMapInstance(map)
    }

    useEffect(() => {
         new maplibregl.Map({
            container: mapContainerRef.current,
            center: defaultPosition,
            ...mapTheme.mapConfig
        }).on('load', loadMap)
    }, [])

    
return ( 
  <Map flyTo
      flyToClick={()=> {handleFlyTo(mapInstance)}}
      zoomBtns
      zoomInClick={() => {handleZoomIn(mapInstance)}}
      zoomOutClick={()=> {handleZoomOut(mapInstance)}}
  >
       <div
           ref={mapContainerRef}
           style={{
              position: 'absolute',
              left: 0,
              right: 0,
              top: 0, 
              bottom: 0,
           }}
       />
    </Map>
)
}

export default MapWithPlugin

Map With Custom Button

If you want to add custom buttons to the Map, you can use the MapCustomButton component nested inside Map.Controls as shown in the code snippet below. Note that when Map.Controls is used in this way, the props for the rest of the buttons must also be passed to Map.Controls instead of the Map itself.

import React, { useRef, useEffect, useState } from 'react'

import { Map, mapTheme, MapCustomButton } from 'playbook-ui'

import maplibregl from 'maplibre-gl'

const MapWithCustomButton = (props) => {

  //set Map instance to access from outside useEffect
  const [mapInstance, setMapInstance] = useState(null)
  const mapContainerRef = useRef(null)

  //Set default position
  const defaultPosition = [-75.379143, 39.831200]

  // linking Maplibre methods to PB custom zoom in, zoom out, and fly to buttons
  const handleZoomIn = (map) => {map.zoomIn({...mapTheme.zoomConfig})}
  const handleZoomOut = (map) => {map.zoomOut({...mapTheme.zoomConfig})}
  const handleFlyTo = (map) => {map.flyTo({
                                center: defaultPosition,
                                ... mapTheme.flyToConfig
                                });}

  //This function is called by the useEffect when map instance first loads
  const loadMap = ( { target: map }) => {
        //set marker/pin
        new maplibregl.Marker({
          color: mapTheme.marker,
        }).setLngLat(defaultPosition)
        .setPopup(new maplibregl.Popup({closeButton: false}).setHTML(`<h4 class="pb_title_kit_size_4">Hello World!</h4>`)) // add popup
        .addTo(map);

        // disable map zoom when using scroll
        map.scrollZoom.disable();
        
        //add attributioncontrols
        map.addControl(new maplibregl.AttributionControl({
          compact: true
          }));

        //set map instance
        setMapInstance(map)
  }

    useEffect(() => {
         new maplibregl.Map({
            container: mapContainerRef.current,
            center: defaultPosition,
            ...mapTheme.mapConfig
        }).on('load', loadMap)

    }, [])

return ( 
  <Map
  >
    <Map.Controls flyTo
        flyToClick={()=> {handleFlyTo(mapInstance)}}
        zoomBtns
        zoomInClick={() => {handleZoomIn(mapInstance)}}
        zoomOutClick={()=> {handleZoomOut(mapInstance)}}
    >
      <MapCustomButton icon="home" 
          onClick={() => alert("button clicked!")}
      />
      <MapCustomButton icon="search" 
          onClick={() => alert("button clicked!")}
      />
    </Map.Controls>
       <div
           ref={mapContainerRef}
           style={{
              position: 'absolute',
              left: 0,
              right: 0,
              top: 0, 
              bottom: 0,
           }}
       />
    </Map>
)
}

export default MapWithCustomButton

Table

Small

Use table size "sm" when data density is a priority. Smaller row height enables the user to view more data without the need for scrolling.

Table can leverage the max-width property. Learn more in our visual guidelines.

import React from 'react'

import { Table } from 'playbook-ui'

const TableSm = (props) => {
  return (
    <Table
        size="sm"
    >
      <thead>
        <tr>
          <th>{'Column 1'}</th>
          <th>{'Column 2'}</th>
          <th>{'Column 3'}</th>
          <th>{'Column 4'}</th>
          <th>{'Column 5'}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td>{'Value 5'}</td>
        </tr>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td>{'Value 5'}</td>
        </tr>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td>{'Value 5'}</td>
        </tr>
      </tbody>
    </Table>
  )
}

export default TableSm

Medium

Use table size "md" to add padding around each row to increase reading comfortability.

import React from 'react'

import { Table } from 'playbook-ui'

const TableMd = (props) => {
  return (
    <Table
        size="md"
    >
      <thead>
        <tr>
          <th>{'Column 1'}</th>
          <th>{'Column 2'}</th>
          <th>{'Column 3'}</th>
          <th>{'Column 4'}</th>
          <th>{'Column 5'}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td>{'Value 5'}</td>
        </tr>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td>{'Value 5'}</td>
        </tr>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td>{'Value 5'}</td>
        </tr>
      </tbody>
    </Table>
  )
}

export default TableMd

Large

Use table size "lg" to add padding around each row to maximize reading comfortability.

import React from 'react'

import { Table } from 'playbook-ui'

const TableLg = (props) => {
  return (
    <Table
        size="lg"
    >
      <thead>
        <tr>
          <th>{'Column 1'}</th>
          <th>{'Column 2'}</th>
          <th>{'Column 3'}</th>
          <th>{'Column 4'}</th>
          <th>{'Column 5'}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td>{'Value 5'}</td>
        </tr>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td>{'Value 5'}</td>
        </tr>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td>{'Value 5'}</td>
        </tr>
      </tbody>
    </Table>
  )
}

export default TableLg

Sticky Header

React: Use sticky on a table to allow the table header to be fixed in place when the user scrolls up and down on the page.

Rails: Pass sticky: true to props.

If the table header is not sticking in the right place you will need to pass a inline top style to the thead.
React Example: <thead style={{ top: "-16px" }}>
Rails Example: <thead style="top: -16px">

Troubleshooting CSS Problems

Sticky may not work if any parent/ancestor of the sticky element has any of the overflow properties set. Additionally, specifying a height on the overflowing container provides measurement for this feature to work properly. In some cases, it may be necessary to set the same parent/ancestor container to position: static as well.

import React from "react"

import { Table } from 'playbook-ui'

const TableSticky = (props) => (
  <Table
      sticky
  >
    <thead>
      <tr>
        <th>{'Column 1'}</th>
        <th>{'Column 2'}</th>
        <th>{'Column 3'}</th>
        <th>{'Column 4'}</th>
        <th>{'Column 5'}</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>{'Value 1'}</td>
        <td>{'Value 2'}</td>
        <td>{'Value 3'}</td>
        <td>{'Value 4'}</td>
        <td>{'Value 5'}</td>
      </tr>
      <tr>
        <td>{'Value 1'}</td>
        <td>{'Value 2'}</td>
        <td>{'Value 3'}</td>
        <td>{'Value 4'}</td>
        <td>{'Value 5'}</td>
      </tr>
      <tr>
        <td>{'Value 1'}</td>
        <td>{'Value 2'}</td>
        <td>{'Value 3'}</td>
        <td>{'Value 4'}</td>
        <td>{'Value 5'}</td>
      </tr>
      <tr>
        <td>{'Value 1'}</td>
        <td>{'Value 2'}</td>
        <td>{'Value 3'}</td>
        <td>{'Value 4'}</td>
        <td>{'Value 5'}</td>
      </tr>
      <tr>
        <td>{'Value 1'}</td>
        <td>{'Value 2'}</td>
        <td>{'Value 3'}</td>
        <td>{'Value 4'}</td>
        <td>{'Value 5'}</td>
      </tr>
      <tr>
        <td>{'Value 1'}</td>
        <td>{'Value 2'}</td>
        <td>{'Value 3'}</td>
        <td>{'Value 4'}</td>
        <td>{'Value 5'}</td>
      </tr>
      <tr>
        <td>{'Value 1'}</td>
        <td>{'Value 2'}</td>
        <td>{'Value 3'}</td>
        <td>{'Value 4'}</td>
        <td>{'Value 5'}</td>
      </tr>
      <tr>
        <td>{'Value 1'}</td>
        <td>{'Value 2'}</td>
        <td>{'Value 3'}</td>
        <td>{'Value 4'}</td>
        <td>{'Value 5'}</td>
      </tr>
      <tr>
        <td>{'Value 1'}</td>
        <td>{'Value 2'}</td>
        <td>{'Value 3'}</td>
        <td>{'Value 4'}</td>
        <td>{'Value 5'}</td>
      </tr>
      <tr>
        <td>{'Value 1'}</td>
        <td>{'Value 2'}</td>
        <td>{'Value 3'}</td>
        <td>{'Value 4'}</td>
        <td>{'Value 5'}</td>
      </tr>
    </tbody>
  </Table>
)

export default TableSticky

Sticky Left Column

The stickyLeftColumn prop expects an array of the column data-sticky-ids you want to be sticky. Make sure to add the corresponding data-sticky-id to the <th> and <td>.

If you are using the sub-component variant, then you will pass the data-sticky-id to <Table.Header> and <Table.Cell>

Please ensure that unique data-sticky-ids are used for all columns across multiple tables. Using the same columns data-sticky-ids on multiple tables can lead to issues when using stickyLeftColumn prop.

import React from 'react'

import { Table } from 'playbook-ui'

const TableStickyLeftColumns = () => {
    return (
        <Table
            responsive="scroll"
            size="md"
            stickyLeftColumn={["1", "2", "3"]}
        >
            <thead>
                <tr>
                    <th data-sticky-id="1">{'Column 1'}</th>
                    <th data-sticky-id="2">{'Column 2'}</th>
                    <th data-sticky-id="3">{'Column 3'}</th>
                    <th>{'Column 4'}</th>
                    <th>{'Column 5'}</th>
                    <th>{'Column 6'}</th>
                    <th>{'Column 7'}</th>
                    <th>{'Column 8'}</th>
                    <th>{'Column 9'}</th>
                    <th>{'Column 10'}</th>
                    <th>{'Column 11'}</th>
                    <th>{'Column 12'}</th>
                    <th>{'Column 13'}</th>
                    <th>{'Column 14'}</th>
                    <th>{'Column 15'}</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td data-sticky-id="1">{'Value 1'}</td>
                    <td data-sticky-id="2">{'Value 2'}</td>
                    <td data-sticky-id="3">{'Value 3'}</td>
                    <td>{'Value 4'}</td>
                    <td>{'Value 5'}</td>
                    <td>{'Value 6'}</td>
                    <td>{'Value 7'}</td>
                    <td>{'Value 8'}</td>
                    <td>{'Value 9'}</td>
                    <td>{'Value 10'}</td>
                    <td>{'Value 11'}</td>
                    <td>{'Value 12'}</td>
                    <td>{'Value 13'}</td>
                    <td>{'Value 14'}</td>
                    <td>{'Value 15'}</td>
                </tr>
                <tr>
                    <td data-sticky-id="1">{'Value 1'}</td>
                    <td data-sticky-id="2">{'Value 2'}</td>
                    <td data-sticky-id="3">{'Value 3'}</td>
                    <td>{'Value 4'}</td>
                    <td>{'Value 5'}</td>
                    <td>{'Value 6'}</td>
                    <td>{'Value 7'}</td>
                    <td>{'Value 8'}</td>
                    <td>{'Value 9'}</td>
                    <td>{'Value 10'}</td>
                    <td>{'Value 11'}</td>
                    <td>{'Value 12'}</td>
                    <td>{'Value 13'}</td>
                    <td>{'Value 14'}</td>
                    <td>{'Value 15'}</td>
                </tr>
                <tr>
                    <td data-sticky-id="1">{'Value 1'}</td>
                    <td data-sticky-id="2">{'Value 2'}</td>
                    <td data-sticky-id="3">{'Value 3'}</td>
                    <td>{'Value 4'}</td>
                    <td>{'Value 5'}</td>
                    <td>{'Value 6'}</td>
                    <td>{'Value 7'}</td>
                    <td>{'Value 8'}</td>
                    <td>{'Value 9'}</td>
                    <td>{'Value 10'}</td>
                    <td>{'Value 11'}</td>
                    <td>{'Value 12'}</td>
                    <td>{'Value 13'}</td>
                    <td>{'Value 14'}</td>
                    <td>{'Value 15'}</td>
                </tr>
            </tbody>
        </Table>
    )
}

export default TableStickyLeftColumns

Sticky Right Column

The stickyRightColumn prop works in the same way as the above stickyLeftColumn prop. It expects an array of the column data-sticky-ids you want to be sticky. Make sure to add the corresponding data-sticky-id to the <th> and <td>.

If you are using the sub-component variant, then you will pass the data-sticky-id to <Table.Header> and <Table.Cell>

import React from 'react'

import { Table } from 'playbook-ui'

const TableStickyRightColumns = () => {
    return (
        <Table
            responsive="scroll"
            size="md"
            stickyRightColumn={["13", "14", "15"]}
        >
            <thead>
                <tr>
                    <th>{'Column 1'}</th>
                    <th>{'Column 2'}</th>
                    <th>{'Column 3'}</th>
                    <th>{'Column 4'}</th>
                    <th>{'Column 5'}</th>
                    <th>{'Column 6'}</th>
                    <th>{'Column 7'}</th>
                    <th>{'Column 8'}</th>
                    <th>{'Column 9'}</th>
                    <th>{'Column 10'}</th>
                    <th>{'Column 11'}</th>
                    <th>{'Column 12'}</th>
                    <th data-sticky-id="13">{'Column 13'}</th>
                    <th data-sticky-id="14">{'Column 14'}</th>
                    <th data-sticky-id="15">{'Column 15'}</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>{'Value 1'}</td>
                    <td>{'Value 2'}</td>
                    <td>{'Value 3'}</td>
                    <td>{'Value 4'}</td>
                    <td>{'Value 5'}</td>
                    <td>{'Value 6'}</td>
                    <td>{'Value 7'}</td>
                    <td>{'Value 8'}</td>
                    <td>{'Value 9'}</td>
                    <td>{'Value 10'}</td>
                    <td>{'Value 11'}</td>
                    <td>{'Value 12'}</td>
                    <td data-sticky-id="13">{'Value 13'}</td>
                    <td data-sticky-id="14">{'Value 14'}</td>
                    <td data-sticky-id="15">{'Value 15'}</td>
                </tr>
                <tr>
                    <td>{'Value 1'}</td>
                    <td>{'Value 2'}</td>
                    <td>{'Value 3'}</td>
                    <td>{'Value 4'}</td>
                    <td>{'Value 5'}</td>
                    <td>{'Value 6'}</td>
                    <td>{'Value 7'}</td>
                    <td>{'Value 8'}</td>
                    <td>{'Value 9'}</td>
                    <td>{'Value 10'}</td>
                    <td>{'Value 11'}</td>
                    <td>{'Value 12'}</td>
                    <td data-sticky-id="13">{'Value 13'}</td>
                    <td data-sticky-id="14">{'Value 14'}</td>
                    <td data-sticky-id="15">{'Value 15'}</td>
                </tr>
                <tr>
                    <td>{'Value 1'}</td>
                    <td>{'Value 2'}</td>
                    <td>{'Value 3'}</td>
                    <td>{'Value 4'}</td>
                    <td>{'Value 5'}</td>
                    <td>{'Value 6'}</td>
                    <td>{'Value 7'}</td>
                    <td>{'Value 8'}</td>
                    <td>{'Value 9'}</td>
                    <td>{'Value 10'}</td>
                    <td>{'Value 11'}</td>
                    <td>{'Value 12'}</td>
                    <td data-sticky-id="13">{'Value 13'}</td>
                    <td data-sticky-id="14">{'Value 14'}</td>
                    <td data-sticky-id="15">{'Value 15'}</td>
                </tr>
            </tbody>
        </Table>
    )
}

export default TableStickyRightColumns

Sticky Left and Right Columns

The stickyLeftColumn and stickyRightColumn props can be used together on the same table as needed.

Please ensure that unique data-sticky-ids are used for all columns across multiple tables. Using the same columns data-sticky-ids on multiple tables can lead to issues when using props.

import React from 'react'

import { Table } from 'playbook-ui'

const TableStickyColumns = () => {
    return (
        <Table
            responsive="scroll"
            size="md"
            stickyLeftColumn={["a"]}
            stickyRightColumn={["b"]}
        >
            <thead>
                <tr>
                    <th data-sticky-id="a">{'Column 1'}</th>
                    <th>{'Column 2'}</th>
                    <th>{'Column 3'}</th>
                    <th>{'Column 4'}</th>
                    <th>{'Column 5'}</th>
                    <th>{'Column 6'}</th>
                    <th>{'Column 7'}</th>
                    <th>{'Column 8'}</th>
                    <th>{'Column 9'}</th>
                    <th>{'Column 10'}</th>
                    <th>{'Column 11'}</th>
                    <th>{'Column 12'}</th>
                    <th>{'Column 13'}</th>
                    <th>{'Column 14'}</th>
                    <th data-sticky-id="b">{'Column 15'}</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td data-sticky-id="a">{'Value 1'}</td>
                    <td>{'Value 2'}</td>
                    <td>{'Value 3'}</td>
                    <td>{'Value 4'}</td>
                    <td>{'Value 5'}</td>
                    <td>{'Value 6'}</td>
                    <td>{'Value 7'}</td>
                    <td>{'Value 8'}</td>
                    <td>{'Value 9'}</td>
                    <td>{'Value 10'}</td>
                    <td>{'Value 11'}</td>
                    <td>{'Value 12'}</td>
                    <td>{'Value 13'}</td>
                    <td>{'Value 14'}</td>
                    <td data-sticky-id="b">{'Value 15'}</td>
                </tr>
                <tr>
                    <td data-sticky-id="a">{'Value 1'}</td>
                    <td>{'Value 2'}</td>
                    <td>{'Value 3'}</td>
                    <td>{'Value 4'}</td>
                    <td>{'Value 5'}</td>
                    <td>{'Value 6'}</td>
                    <td>{'Value 7'}</td>
                    <td>{'Value 8'}</td>
                    <td>{'Value 9'}</td>
                    <td>{'Value 10'}</td>
                    <td>{'Value 11'}</td>
                    <td>{'Value 12'}</td>
                    <td>{'Value 13'}</td>
                    <td>{'Value 14'}</td>
                    <td data-sticky-id="b">{'Value 15'}</td>
                </tr>
                <tr>
                    <td data-sticky-id="a">{'Value 1'}</td>
                    <td>{'Value 2'}</td>
                    <td>{'Value 3'}</td>
                    <td>{'Value 4'}</td>
                    <td>{'Value 5'}</td>
                    <td>{'Value 6'}</td>
                    <td>{'Value 7'}</td>
                    <td>{'Value 8'}</td>
                    <td>{'Value 9'}</td>
                    <td>{'Value 10'}</td>
                    <td>{'Value 11'}</td>
                    <td>{'Value 12'}</td>
                    <td>{'Value 13'}</td>
                    <td>{'Value 14'}</td>
                    <td data-sticky-id="b">{'Value 15'}</td>
                </tr>
            </tbody>
        </Table>
    )
}

export default TableStickyColumns

Row Alignment

Pass our textAlign global prop to any table.row subcomponent to change the text alignment of all cells within that row.
The header/ first row is the default, followed by the second row being centered, and then the last row shifted to the right.

import React from 'react'

import { Table } from 'playbook-ui'

const TableAlignmentRow = (props) => {
  return (
    <Table
    >
    <Table.Head>
      <Table.Row>
        <Table.Header>{'Column 1'}</Table.Header>
        <Table.Header>{'Column 2'}</Table.Header>
        <Table.Header>{'Column 3'}</Table.Header>
        <Table.Header>{'Column 4'}</Table.Header>
        <Table.Header>{'Column 5'}</Table.Header>
      </Table.Row>
    </Table.Head>
    <Table.Body>
      <Table.Row>
        <Table.Cell>{'Value 1'}</Table.Cell>
        <Table.Cell>{'Value 2'}</Table.Cell>
        <Table.Cell>{'Value 3'}</Table.Cell>
        <Table.Cell>{'Value 4'}</Table.Cell>
        <Table.Cell>{'Value 5'}</Table.Cell>
      </Table.Row>
      <Table.Row textAlign="center">
        <Table.Cell>{'Value 1'}</Table.Cell>
        <Table.Cell>{'Value 2'}</Table.Cell>
        <Table.Cell>{'Value 3'}</Table.Cell>
        <Table.Cell>{'Value 4'}</Table.Cell>
        <Table.Cell>{'Value 5'}</Table.Cell>
      </Table.Row>
      <Table.Row textAlign="right">
        <Table.Cell>{'Value 1'}</Table.Cell>
        <Table.Cell>{'Value 2'}</Table.Cell>
        <Table.Cell>{'Value 3'}</Table.Cell>
        <Table.Cell>{'Value 4'}</Table.Cell>
        <Table.Cell>{'Value 5'}</Table.Cell>
      </Table.Row>
    </Table.Body>
  </Table>
  )
}

export default TableAlignmentRow

Cell Alignment

Pass our textAlign global prop to any table.cell subcomponent to change the text alignment of individual cells, or apply this prop persistently to align entire columns.
In the table above the "Rating" column contents is centered and the "Money" column contents is right aligned.

import React from 'react'

import { Table } from 'playbook-ui'

const TableAlignmentColumn = (props) => {
  return (
    <Table
    >
        <Table.Head>
            <Table.Row>
                <Table.Header>{'Column 1'}</Table.Header>
                <Table.Header>{'Column 2'}</Table.Header>
                <Table.Header>{'Column 3'}</Table.Header>
                <Table.Header textAlign="center">{'Rating'}</Table.Header>
                <Table.Header textAlign="right">{'Money'}</Table.Header>
            </Table.Row>
        </Table.Head>
        <Table.Body>
            <Table.Row>
                <Table.Cell>{'Value 1'}</Table.Cell>
                <Table.Cell>{'Value 2'}</Table.Cell>
                <Table.Cell>{'Value 3'}</Table.Cell>
                <Table.Cell textAlign="center">{'3'}</Table.Cell>
                <Table.Cell textAlign="right">{'$57.32'}</Table.Cell>
            </Table.Row>
            <Table.Row>
                <Table.Cell>{'Value 1'}</Table.Cell>
                <Table.Cell>{'Value 2'}</Table.Cell>
                <Table.Cell>{'Value 3'}</Table.Cell>
                <Table.Cell textAlign="center">{'2'}</Table.Cell>
                <Table.Cell textAlign="right">{'$5,657.08'}</Table.Cell>
            </Table.Row>
            <Table.Row>
                <Table.Cell>{'Value 1'}</Table.Cell>
                <Table.Cell>{'Value 2'}</Table.Cell>
                <Table.Cell>{'Value 3'}</Table.Cell>
                <Table.Cell textAlign="center">{'4'}</Table.Cell>
                <Table.Cell textAlign="right">{'$358.77'}</Table.Cell>
            </Table.Row>
        </Table.Body>
    </Table>

  )
}

export default TableAlignmentColumn

Row Shift

Pass our verticalAlign global prop to any table.row subcomponent to change the vertical alignment of all cells within that row.

import React from 'react'

import { Table } from 'playbook-ui'

const TableAlignmentShiftRow = (props) => {
  return (
    <Table>
      <Table.Head>
        <Table.Row>
          <Table.Header>{'Column 1'}</Table.Header>
          <Table.Header>{'Column 2'}</Table.Header>
          <Table.Header>{'Column 3'}</Table.Header>
          <Table.Header>{'Column 4'}</Table.Header>
          <Table.Header>{'Column 5'}</Table.Header>
        </Table.Row>
      </Table.Head>
      <Table.Body>
        <Table.Row>
          <Table.Cell>
            {'Value 1a'}
            <br />
            {'Value 1a'}
            <br />
            {'Value 1a'}
          </Table.Cell>
          <Table.Cell>{'Value 2a'}</Table.Cell>
          <Table.Cell>{'Value 3a'}</Table.Cell>
          <Table.Cell>{'Value 4a'}</Table.Cell>
          <Table.Cell>{'Value 5a'}</Table.Cell>
        </Table.Row>
        <Table.Row verticalAlign="middle">
          <Table.Cell>
            {'Value 1b'}
            <br />
            {'Value 1b'}
            <br />
            {'Value 1b'}
          </Table.Cell>
          <Table.Cell>{'Value 2b'}</Table.Cell>
          <Table.Cell>{'Value 3b'}</Table.Cell>
          <Table.Cell>{'Value 4b'}</Table.Cell>
          <Table.Cell>{'Value 5b'}</Table.Cell>
        </Table.Row>
        <Table.Row verticalAlign="bottom">
          <Table.Cell>
            {'Value 1c'}
            <br />
            {'Value 1c'}
            <br />
            {'Value 1c'}
          </Table.Cell>
          <Table.Cell>{'Value 2c'}</Table.Cell>
          <Table.Cell>{'Value 3c'}</Table.Cell>
          <Table.Cell>{'Value 4c'}</Table.Cell>
          <Table.Cell>{'Value 5c'}</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>

  )
}

export default TableAlignmentShiftRow

Cell Shift

Pass our verticalAlign global prop to any table.cell subcomponent to change the text alignment of individual cells, or apply this prop persistently to align entire columns.
The first table shifts "Total" down, whereas the second table shifts the "Espresso Drinks" column contents up.

import React from 'react'

import { Table } from 'playbook-ui'

const TableAlignmentShiftData = (props) => {
  return (
    <div>
      <Table
          marginBottom="md"
      >
        <Table.Head>
          <Table.Row>
            <Table.Header>&nbsp;</Table.Header>
            <Table.Header>{'Price'}</Table.Header>
          </Table.Row>
        </Table.Head>
        <Table.Body>
          <Table.Row>
            <Table.Cell verticalAlign="bottom">{'Total'}</Table.Cell>
            <Table.Cell>
              {'$12'}
              <br />
              {'$46'}
              <br />
              {'$25'}
              <br />
              {'-------'}
              <br />
              {'$83'}
            </Table.Cell>
          </Table.Row>
        </Table.Body>
      </Table>

      <Table
      >
      <Table.Head>
        <Table.Row>
          <Table.Header>{'Espresso Drinks'}</Table.Header>
          <Table.Header>{'Ingredients'}</Table.Header>
        </Table.Row>
      </Table.Head>
      <Table.Body>
        <Table.Row>
          <Table.Cell verticalAlign="top">{'Cappuccino'} </Table.Cell>
          <Table.Cell>
          {'Steamed Milk'}
          <br />
          {'Milk Foam'}
          </Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell verticalAlign="top">
            {'Macchiato'}
            </Table.Cell>
            <Table.Cell verticalAlign="top">
            {'Espresso'}
            <br />
            {'Steamed Milk'}
          </Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>
            {'Mocha'}
            </Table.Cell>
          <Table.Cell>
            {'Hot Chocolate'}
            <br />
            {'Steamed Milk'}
          </Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
    </div>
  )
}

export default TableAlignmentShiftData

Side Highlight

Side highlight can take product, status, and category colors. To view full list of colors, visit token colors.

Note: Only use category colors for categories. Do not mix it with product or status colors.

import React from 'react'

import { Table } from 'playbook-ui'

const TableSideHighlight = (props) => {
  return (
    <div>
      <Table
          size="sm"
      >
        <thead>
          <tr>
            <th>{'Product colors'}</th>
            <th>{'Column 2'}</th>
            <th>{'Column 3'}</th>
            <th>{'Column 4'}</th>
            <th>{'Column 5'}</th>
          </tr>
        </thead>
        <tbody>
          <Table.Row
              sideHighlightColor="product_1_highlight"
          >
            <td>{'Product 1'}</td>
            <td>{'Value 2'}</td>
            <td>{'Value 3'}</td>
            <td>{'Value 4'}</td>
            <td>{'Value 5'}</td>
          </Table.Row>
          <Table.Row
              sideHighlightColor="product_2_highlight"
          >
            <td>{'Product 2'}</td>
            <td>{'Value 2'}</td>
            <td>{'Value 3'}</td>
            <td>{'Value 4'}</td>
            <td>{'Value 5'}</td>
          </Table.Row>
          <Table.Row
              sideHighlightColor="product_3_highlight"
          >
            <td>{'Product 3'}</td>
            <td>{'Value 2'}</td>
            <td>{'Value 3'}</td>
            <td>{'Value 4'}</td>
            <td>{'Value 5'}</td>
          </Table.Row>
          <Table.Row
              sideHighlightColor="none"
          >
            <td>{'None'}</td>
            <td>{'Value 2'}</td>
            <td>{'Value 3'}</td>
            <td>{'Value 4'}</td>
            <td>{'Value 5'}</td>
          </Table.Row>
        </tbody>
      </Table>

      <br />

      <Table
          size="sm"
      >
        <thead>
          <tr>
            <th>{'Status colors'}</th>
            <th>{'Column 2'}</th>
            <th>{'Column 3'}</th>
            <th>{'Column 4'}</th>
            <th>{'Column 5'}</th>
          </tr>
        </thead>
        <tbody>
          <Table.Row
              sideHighlightColor="success"
          >
            <td>{'Success'}</td>
            <td>{'Value 2'}</td>
            <td>{'Value 3'}</td>
            <td>{'Value 4'}</td>
            <td>{'Value 5'}</td>
          </Table.Row>
          <Table.Row
              sideHighlightColor="warning"
          >
            <td>{'Warning'}</td>
            <td>{'Value 2'}</td>
            <td>{'Value 3'}</td>
            <td>{'Value 4'}</td>
            <td>{'Value 5'}</td>
          </Table.Row>
          <Table.Row
              sideHighlightColor="error"
          >
            <td>{'Error'}</td>
            <td>{'Value 2'}</td>
            <td>{'Value 3'}</td>
            <td>{'Value 4'}</td>
            <td>{'Value 5'}</td>
          </Table.Row>
          <Table.Row
              sideHighlightColor="none"
          >
            <td>{'None'}</td>
            <td>{'Value 2'}</td>
            <td>{'Value 3'}</td>
            <td>{'Value 4'}</td>
            <td>{'Value 5'}</td>
          </Table.Row>
        </tbody>
      </Table>

      <br />

      <Table
          size="sm"
      >
        <thead>
          <tr>
            <th>{'Category Colors'}</th>
            <th>{'Column 2'}</th>
            <th>{'Column 3'}</th>
            <th>{'Column 4'}</th>
            <th>{'Column 5'}</th>
          </tr>
        </thead>
        <tbody>
          <Table.Row
              sideHighlightColor="category_1"
          >
            <td>{'Category Color 1'}</td>
            <td>{'Value 2'}</td>
            <td>{'Value 3'}</td>
            <td>{'Value 4'}</td>
            <td>{'Value 5'}</td>
          </Table.Row>
          <Table.Row
              sideHighlightColor="category_2"
          >
            <td>{'Category Color 2'}</td>
            <td>{'Value 2'}</td>
            <td>{'Value 3'}</td>
            <td>{'Value 4'}</td>
            <td>{'Value 5'}</td>
          </Table.Row>
          <Table.Row
              sideHighlightColor="category_3"
          >
            <td>{'Category Color 3'}</td>
            <td>{'Value 2'}</td>
            <td>{'Value 3'}</td>
            <td>{'Value 4'}</td>
            <td>{'Value 5'}</td>
          </Table.Row>
          <Table.Row
              sideHighlightColor="none"
          >
            <td>{'None'}</td>
            <td>{'Value 2'}</td>
            <td>{'Value 3'}</td>
            <td>{'Value 4'}</td>
            <td>{'Value 5'}</td>
          </Table.Row>
        </tbody>
      </Table>
    </div>
  )
}

export default TableSideHighlight

Table Container Off

import React from 'react'

import { Table } from 'playbook-ui'

const TableContainer = (props) => {
  return (
    <Table
        container={false}
        size="md"
    >
      <thead>
        <tr>
          <th>{'Column 1'}</th>
          <th>{'Column 2'}</th>
          <th>{'Column 3'}</th>
          <th>{'Column 4'}</th>
          <th>{'Column 5'}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td>{'Value 5'}</td>
        </tr>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td>{'Value 5'}</td>
        </tr>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td>{'Value 5'}</td>
        </tr>
      </tbody>
    </Table>
  )
}

export default TableContainer

Disable Hover

import React from 'react'

import { Table } from 'playbook-ui'

const TableDisableHover = (props) => {
  return (
    <Table
        disableHover
        size="md"
    >
      <thead>
        <tr>
          <th>{'Column 1'}</th>
          <th>{'Column 2'}</th>
          <th>{'Column 3'}</th>
          <th>{'Column 4'}</th>
          <th>{'Column 5'}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td>{'Value 5'}</td>
        </tr>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td>{'Value 5'}</td>
        </tr>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td>{'Value 5'}</td>
        </tr>
      </tbody>
    </Table>
  )
}

export default TableDisableHover

Multi-line

import React from 'react'

import { Table } from 'playbook-ui'

const TableMultiline = (props) => {
  return (
    <Table
        size="sm"
    >
      <thead>
        <tr>
          <th>{'Column 1'}</th>
          <th>{'Column 2'}</th>
          <th>{'Column 3'}</th>
          <th>{'Column 4'}</th>
          <th>{'Column 5'}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            {'Value 1'}
            <br />
            {'Value 1'}
            <br />
            {'Value 1'}
          </td>
          <td>{'Value 2'}</td>
          <td>
            {'Value 3'}
            <br />
            {'Value 3'}
          </td>
          <td>{'Value 4'}</td>
          <td>{'Value 5'}</td>
        </tr>
        <tr>
          <td>
            {'Value 1'}
            <br />
            {'Value 1'}
            <br />
            {'Value 1'}
          </td>
          <td>{'Value 2'}</td>
          <td>
            {'Value 3'}
            <br />
            {'Value 3'}
          </td>
          <td>{'Value 4'}</td>
          <td>{'Value 5'}</td>
        </tr>
        <tr>
          <td>
            {'Value 1'}
            <br />
            {'Value 1'}
            <br />
            {'Value 1'}
          </td>
          <td>{'Value 2'}</td>
          <td>
            {'Value 3'}
            <br />
            {'Value 3'}
          </td>
          <td>{'Value 4'}</td>
          <td>{'Value 5'}</td>
        </tr>
      </tbody>
    </Table>
  )
}

export default TableMultiline

Force Single Line

import React from 'react'

import { Table } from 'playbook-ui'

const TableSingleLine = (props) => {
  return (
    <Table
        singleLine
        size="sm"
    >
      <thead>
        <tr>
          <th>{'Column 1'}</th>
          <th>{'Column 2'}</th>
          <th>{'Column 3'}</th>
          <th>{'Column 4'}</th>
          <th>{'Column 5'}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            {'Value 1'}
            <br />
            {'Value 1'}
            <br />
            {'Value 1'}
          </td>
          <td>{'Value 2'}</td>
          <td>
            {'Value 3'}
            <br />
            {'Value 3'}
          </td>
          <td>{'Value 4'}</td>
          <td>{'Value 5'}</td>
        </tr>
        <tr>
          <td>
            {'Value 1'}
            <br />
            {'Value 1'}
            <br />
            {'Value 1'}
          </td>
          <td>{'Value 2'}</td>
          <td>
            {'Value 3'}
            <br />
            {'Value 3'}
          </td>
          <td>{'Value 4'}</td>
          <td>{'Value 5'}</td>
        </tr>
        <tr>
          <td>
            {'Value 1'}
            <br />
            {'Value 1'}
            <br />
            {'Value 1'}
          </td>
          <td>{'Value 2'}</td>
          <td>
            {'Value 3'}
            <br />
            {'Value 3'}
          </td>
          <td>{'Value 4'}</td>
          <td>{'Value 5'}</td>
        </tr>
      </tbody>
    </Table>
  )
}

export default TableSingleLine

Data Table

Tighter spacing in first- and last-child cells of each row for data-heavy tables.

import React from 'react'

import { Table } from 'playbook-ui'

const TableDataTable = (props) => {
  return (
    <Table
        dataTable
    >
      <thead>
        <tr>
          <th>{'Column 1'}</th>
          <th>{'Column 2'}</th>
          <th>{'Column 3'}</th>
          <th>{'Column 4'}</th>
          <th>{'Column 5'}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td>{'Value 5'}</td>
        </tr>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td>{'Value 5'}</td>
        </tr>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td>{'Value 5'}</td>
        </tr>
      </tbody>
    </Table>
  )
}

export default TableDataTable

Responsive Tables

import React from 'react'

import { Table, Title } from 'playbook-ui'

const TableResponsiveTable = (props) => {
  return (
    <div>
      <Title
          size={4}
          text="Not Responsive"
      />
      <Table
          responsive="none"
      >
        <thead>
          <tr>
            <th>{'Column 1'}</th>
            <th>{'Column 2'}</th>
            <th>{'Column 3'}</th>
            <th>{'Column 4'}</th>
            <th>{'Column 5'}</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>{'Value 1'}</td>
            <td>{'Value 2'}</td>
            <td>{'Value 3'}</td>
            <td>{'Value 4'}</td>
            <td>{'Value 5'}</td>
          </tr>
        </tbody>
      </Table>
      <br />
      <br />
      <Title
          size={4}
          text="Collapse Mobile"
      />
      <Table
          collapse="sm"
      >
        <thead>
          <tr>
            <th>{'Column 1'}</th>
            <th>{'Column 2'}</th>
            <th>{'Column 3'}</th>
            <th>{'Column 4'}</th>
            <th>{'Column 5'}</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>{'Value 1'}</td>
            <td>{'Value 2'}</td>
            <td>{'Value 3'}</td>
            <td>{'Value 4'}</td>
            <td>{'Value 5'}</td>
          </tr>
        </tbody>
      </Table>
      <br />
      <br />
      <Title
          size={4}
          text="Collapse Tablet"
      />
      <Table
          collapse="md"
      >
        <thead>
          <tr>
            <th>{'Column 1'}</th>
            <th>{'Column 2'}</th>
            <th>{'Column 3'}</th>
            <th>{'Column 4'}</th>
            <th>{'Column 5'}</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>{'Value 1'}</td>
            <td>{'Value 2'}</td>
            <td>{'Value 3'}</td>
            <td>{'Value 4'}</td>
            <td>{'Value 5'}</td>
          </tr>
        </tbody>
      </Table>
      <br />
      <br />
      <Title
          size={4}
          text="Collapse Desktop"
      />
      <Table
          collapse="lg"
      >
        <thead>
          <tr>
            <th>{'Column 1'}</th>
            <th>{'Column 2'}</th>
            <th>{'Column 3'}</th>
            <th>{'Column 4'}</th>
            <th>{'Column 5'}</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>{'Value 1'}</td>
            <td>{'Value 2'}</td>
            <td>{'Value 3'}</td>
            <td>{'Value 4'}</td>
            <td>{'Value 5'}</td>
          </tr>
        </tbody>
      </Table>
    </div>
  )
}

export default TableResponsiveTable

Table with 1 Action

If there is one button on each row of the table, ideally, it should use the secondary variant and be placed at the end of the row

import React from 'react'

import { Table, Button } from 'playbook-ui'

const TableOneAction = (props) => {
  return (
    <Table
        size="sm"
    >
      <thead>
        <tr>
          <th>{'Column 1'}</th>
          <th>{'Column 2'}</th>
          <th>{'Column 3'}</th>
          <th>{'Column 4'}</th>
          <th>{''}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td align="right">
            {' '}
            <Button
                onClick={() => alert('button clicked!')}
                text="Action"
                variant="secondary"
            />
            {' '}
          </td>
        </tr>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td align="right">
            {' '}
            <Button
                onClick={() => alert('button clicked!')}
                text="Action"
                variant="secondary"
            />
            {' '}
          </td>
        </tr>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td align="right">
            {' '}
            <Button
                onClick={() => alert('button clicked!')}
                text="Action"
                variant="secondary"
            />
            {' '}
          </td>
        </tr>
      </tbody>
    </Table>
  )
}

export default TableOneAction

Table with 2 Actions

If there are two actions on each of the row, one should ideally one should use the secondary variant and the other use the link variant. The button using the secondary variant should be placed at the end.

import React from 'react'

import { Table, Button } from 'playbook-ui'

const TableOneAction = (props) => {
  return (
    <Table
        size="sm"
    >
      <thead>
        <tr>
          <th>{'Column 1'}</th>
          <th>{'Column 2'}</th>
          <th>{'Column 3'}</th>
          <th>{'Column 4'}</th>
          <th>{''}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td align="right">
            <Button
                onClick={() => alert('button clicked!')}
                paddingLeft="none"
                text="Tertiary Action"
                variant="link"
            />
            <Button
                onClick={() => alert('button clicked!')}
                text="Secondary Action"
                variant="secondary"
            />
          </td>
        </tr>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td align="right">
            <Button
                onClick={() => alert('button clicked!')}
                paddingLeft="none"
                text="Tertiary Action"
                variant="link"
            />
            <Button
                onClick={() => alert('button clicked!')}
                text="Secondary Action"
                variant="secondary"
            />
          </td>
        </tr>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td align="right">
            <Button
                onClick={() => alert('button clicked!')}
                paddingLeft="none"
                text="Tertiary Action"
                variant="link"
            />
            <Button
                onClick={() => alert('button clicked!')}
                text="Secondary Action"
                variant="secondary"
            />
          </td>
        </tr>
      </tbody>
    </Table>
  )
}

export default TableOneAction

Table with 2+ Actions

If there are more than two actions on each row, then they should be contained in secondary circle icon button with the ellipsis-h icon (horizontal ellipsis) at the end of the row

import React from 'react'

import { Table, CircleIconButton } from 'playbook-ui'

const TableTwoPlusActions = (props) => {
  return (
    <Table
        size="sm"
    >
      <thead>
        <tr>
          <th>{'Column 1'}</th>
          <th>{'Column 2'}</th>
          <th>{'Column 3'}</th>
          <th>{'Column 4'}</th>
          <th>{''}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td align="right">
            {' '}
            <CircleIconButton
                icon="ellipsis-h"
                variant="secondary"
            />
          </td>
        </tr>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td align="right">
            {' '}
            <CircleIconButton
                icon="ellipsis-h"
                variant="secondary"
            />
          </td>

        </tr>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td align="right">
            {' '}
            <CircleIconButton
                icon="ellipsis-h"
                variant="secondary"
            />
          </td>
        </tr>
      </tbody>
    </Table>
  )
}

export default TableTwoPlusActions

Table with Actions in the Middle

If the button is towards the middle of the table, it should likely use button variant link

import React from 'react'

import { Table, Button } from 'playbook-ui'

const TableActionMiddle = (props) => {
  return (
    <Table
        size="sm"
    >
      <thead>
        <tr>
          <th>{'Column 1'}</th>
          <th>{'Column 2'}</th>
          <th>{'Column 3'}</th>
          <th>{'Column 4'}</th>
          <th>{'Column 5'}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>
            {' '}
            <Button
                onClick={() => alert('button clicked!')}
                paddingLeft="none"
                text="Action"
                variant="link"
            />
          </td>
          <td>{'Value 4'}</td>
          <td>{'Value 5'}</td>
        </tr>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>
            {' '}
            <Button
                onClick={() => alert('button clicked!')}
                paddingLeft="none"
                text="Action"
                variant="link"
            />
          </td>
          <td>{'Value 4'}</td>
          <td>{'Value 5'}</td>
        </tr>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>
            {' '}
            <Button
                onClick={() => alert('button clicked!')}
                paddingLeft="none"
                text="Action"
                variant="link"
            />
          </td>
          <td>{'Value 4'}</td>
          <td>{'Value 5'}</td>
        </tr>
      </tbody>
    </Table>
  )
}

export default TableActionMiddle

Table with Icon Buttons

Icon buttons are great to use if space is limited. If the icon isn’t VERY self explanatory (for example pencil/pen for edit, trashcan for delete) then it should use a tooltip explaining what the action does. The tooltip shouldn’t be longer than a few words and essentially serves as a replacement for what the button would say if it weren’t an icon

import React from 'react'

import { Table, CircleIconButton, Flex, FlexItem } from 'playbook-ui'

const TableIconButtons = (props) => {
  return (
    <Table
        size="sm"
    >
      <thead>
        <tr>
          <th>{'Column 1'}</th>
          <th>{'Column 2'}</th>
          <th>{'Column 3'}</th>
          <th>{'Column 4'}</th>
          <th>{''}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td align="right">
            <Flex
                justifyContent="end"
                orientation="row"
            >
              <FlexItem>
                <CircleIconButton
                    icon="trash-alt"
                    variant="link"
                />
              </FlexItem>
              <FlexItem>
                <CircleIconButton
                    icon="pencil"
                    variant="secondary"
                />
              </FlexItem>
            </Flex>
          </td>
        </tr>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td align="right">
            <Flex 
                justifyContent="end"
                orientation="row"
            >
              <FlexItem>
                <CircleIconButton
                    icon="trash-alt"
                    variant="link"
                />
              </FlexItem>
              <FlexItem>
                <CircleIconButton
                    icon="pencil"
                    variant="secondary"
                />
              </FlexItem>
            </Flex>
          </td>
        </tr>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value lk'}</td>
          <td align="right">
            <Flex 
                justifyContent="end"
                orientation="row"
            >
              <FlexItem>
                <CircleIconButton
                    icon="trash-alt"
                    variant="link"
                />
              </FlexItem>
              <FlexItem>
                <CircleIconButton
                    icon="pencil"
                    variant="secondary"
                />
              </FlexItem>
            </Flex>
          </td>
        </tr>
      </tbody>
    </Table>
  )
}

export default TableIconButtons

Table With Background Kit

import React from 'react'

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

const TableWithBackgroundKit = (props) => {
  return (
    <div>
      <div>
        <Table
        >
          <thead>
            <tr>
                <th>{'Column 1'}</th>
                <th>{'Column 2'}</th>
                <th>{'Column 3'}</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>{'Value 1'}</td>
              <td>{'Value 2'}</td>
              <td>{'Value 3'}</td>
            </tr>
            <Background
                backgroundColor="error_subtle"
                tag='tr'
            >
              <td>{'Value 1'}</td>
              <td>{'Value 2'}</td>
              <td>{'Value 3'}</td>
            </Background>
            <tr>
              <td>{'Value 1'}</td>
              <td>{'Value 2'}</td>
              <td>{'Value 3'}</td>
            </tr>
            <tr>
              <td>{'Value 1'}</td>
              <td>{'Value 2'}</td>
              <td>{'Value 3'}</td>
            </tr>
            <Background
                backgroundColor="warning_subtle"
                tag='tr'
            >
              <td>{'Value 1'}</td>
              <td>{'Value 2'}</td>
              <td>{'Value 3'}</td>
            </Background>
            <tr>
              <td>{'Value 1'}</td>
              <td>{'Value 2'}</td>
              <td>{'Value 3'}</td>
            </tr>
          </tbody>
        </Table>
      </div>
      <div>
        <Table
            paddingTop="sm"
        >
          <colgroup>
            <Background
                backgroundColor="error_subtle"
                tag='col'
            />
            <Background
                backgroundColor="info_subtle"
                tag='col'
            />
            <Background
                backgroundColor="warning_subtle"
                tag='col'
            />
          </colgroup>
          <thead>
            <tr>
              <th>{'Column 1'}</th>
              <th>{'Column 2'}</th>
              <th>{'Column 3'}</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>{'Value 1'}</td>
              <td>{'Value 2'}</td>
              <td>{'Value 3'}</td>
            </tr>
            <tr>
              <td>{'Value 1'}</td>
              <td>{'Value 2'}</td>
              <td>{'Value 3'}</td>
            </tr>
            <tr>
              <td>{'Value 1'}</td>
              <td>{'Value 2'}</td>
              <td>{'Value 3'}</td>
            </tr>
            <tr>
              <td>{'Value 1'}</td>
              <td>{'Value 2'}</td>
              <td>{'Value 3'}</td>
            </tr>
            <tr>
              <td>{'Value 1'}</td>
              <td>{'Value 2'}</td>
              <td>{'Value 3'}</td>
            </tr>
            <tr>
              <td>{'Value 1'}</td>
              <td>{'Value 2'}</td>
              <td>{'Value 3'}</td>
            </tr>
          </tbody>
        </Table>
        </div>
    </div>
  )
}

export default TableWithBackgroundKit

Vertical Borders

import React from 'react'

import { Table } from 'playbook-ui'

const TableVerticalBorder = (props) => {
  return (
    <Table
        size="sm"
        verticalBorder
    >
      <thead>
        <tr>
          <th>{'Column 1'}</th>
          <th>{'Column 2'}</th>
          <th>{'Column 3'}</th>
          <th>{'Column 4'}</th>
          <th>{'Column 5'}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td>{'Value 5'}</td>
        </tr>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td>{'Value 5'}</td>
        </tr>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td>{'Value 5'}</td>
        </tr>
      </tbody>
    </Table>
  )
}

export default TableVerticalBorder

Striped Table

Optionally pass the striped (boolean, defaults to false) prop to set odd rows to a contrasting background color. This helps with readability on larger tables with lots of data.

import React from "react"

import { Table } from 'playbook-ui'

const TableStriped = (props) => (
  <Table
      striped
  >
    <thead>
      <tr>
        <th>{'Column 1'}</th>
        <th>{'Column 2'}</th>
        <th>{'Column 3'}</th>
        <th>{'Column 4'}</th>
        <th>{'Column 5'}</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>{'Value 1'}</td>
        <td>{'Value 2'}</td>
        <td>{'Value 3'}</td>
        <td>{'Value 4'}</td>
        <td>{'Value 5'}</td>
      </tr>
      <tr>
        <td>{'Value 1'}</td>
        <td>{'Value 2'}</td>
        <td>{'Value 3'}</td>
        <td>{'Value 4'}</td>
        <td>{'Value 5'}</td>
      </tr>
      <tr>
        <td>{'Value 1'}</td>
        <td>{'Value 2'}</td>
        <td>{'Value 3'}</td>
        <td>{'Value 4'}</td>
        <td>{'Value 5'}</td>
      </tr>
      <tr>
        <td>{'Value 1'}</td>
        <td>{'Value 2'}</td>
        <td>{'Value 3'}</td>
        <td>{'Value 4'}</td>
        <td>{'Value 5'}</td>
      </tr>
      <tr>
        <td>{'Value 1'}</td>
        <td>{'Value 2'}</td>
        <td>{'Value 3'}</td>
        <td>{'Value 4'}</td>
        <td>{'Value 5'}</td>
      </tr>
    </tbody>
  </Table>
)

export default TableStriped

Table with Sub Components (Table Elements)

You can optionally build your table using our sub-components, which map to their respective html table elements:

Table.Head = thead
Table.Body = tbody
Table.Row = tr
Table.Header = th
Table.Cell = td

import React from 'react'

import { Table } from 'playbook-ui'

const TableWithSubcomponents = (props) => {
  return (
    <Table
        size="sm"
    >
      <Table.Head>
        <Table.Row>
          <Table.Header>{'Column 1'}</Table.Header>
          <Table.Header>{'Column 2'}</Table.Header>
          <Table.Header>{'Column 3'}</Table.Header>
          <Table.Header>{'Column 4'}</Table.Header>
          <Table.Header>{'Column 5'}</Table.Header>
        </Table.Row>
      </Table.Head>
      <Table.Body>
        <Table.Row>
          <Table.Cell>{'Value 1'}</Table.Cell>
          <Table.Cell>{'Value 2'}</Table.Cell>
          <Table.Cell>{'Value 3'}</Table.Cell>
          <Table.Cell>{'Value 4'}</Table.Cell>
          <Table.Cell>{'Value 5'}</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>{'Value 1'}</Table.Cell>
          <Table.Cell>{'Value 2'}</Table.Cell>
          <Table.Cell>{'Value 3'}</Table.Cell>
          <Table.Cell>{'Value 4'}</Table.Cell>
          <Table.Cell>{'Value 5'}</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>{'Value 1'}</Table.Cell>
          <Table.Cell>{'Value 2'}</Table.Cell>
          <Table.Cell>{'Value 3'}</Table.Cell>
          <Table.Cell>{'Value 4'}</Table.Cell>
          <Table.Cell>{'Value 5'}</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
  )
}

export default TableWithSubcomponents

Table with Sub Components (Divs)

Optionally build your table with divs by passing div to the tag prop of all* your sub-components.

*NOTE: The tag prop defaults to table, which returns html elements. If divs are desired, sub-components must be used and all table elements, including the initial kit call, must use div as their tag in order for the table to render properly.

import React from 'react'

import { Table } from 'playbook-ui'

const TableWithSubcomponentsAsDivs = (props) => {
  return (
    <Table
        size="sm"
        tag="div"
    >
      <Table.Head tag="div">
        <Table.Row tag="div">
          <Table.Header tag="div">{'Column 1'}</Table.Header>
          <Table.Header tag="div">{'Column 2'}</Table.Header>
          <Table.Header tag="div">{'Column 3'}</Table.Header>
          <Table.Header tag="div">{'Column 4'}</Table.Header>
          <Table.Header tag="div">{'Column 5'}</Table.Header>
        </Table.Row>
      </Table.Head>
      <Table.Body tag="div">
        <Table.Row tag="div">
          <Table.Cell tag="div">{'Value 1'}</Table.Cell>
          <Table.Cell tag="div">{'Value 2'}</Table.Cell>
          <Table.Cell tag="div">{'Value 3'}</Table.Cell>
          <Table.Cell tag="div">{'Value 4'}</Table.Cell>
          <Table.Cell tag="div">{'Value 5'}</Table.Cell>
        </Table.Row>
        <Table.Row tag="div">
          <Table.Cell tag="div">{'Value 1'}</Table.Cell>
          <Table.Cell tag="div">{'Value 2'}</Table.Cell>
          <Table.Cell tag="div">{'Value 3'}</Table.Cell>
          <Table.Cell tag="div">{'Value 4'}</Table.Cell>
          <Table.Cell tag="div">{'Value 5'}</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell tag="div">{'Value 1'}</Table.Cell>
          <Table.Cell tag="div">{'Value 2'}</Table.Cell>
          <Table.Cell tag="div">{'Value 3'}</Table.Cell>
          <Table.Cell tag="div">{'Value 4'}</Table.Cell>
          <Table.Cell tag="div">{'Value 5'}</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
  )
}

export default TableWithSubcomponentsAsDivs

Outer Padding

Pass any of our spacing tokens to the outerPadding / outer_padding prop to customize a table's outer padding (both the left padding of the first column and the right padding of the last column).

import React from 'react'

import { Table, Button } from 'playbook-ui'

const TableOuterPadding = (props) => {
  return (
    <Table
        outerPadding="sm"
        size="sm"
    >
      <thead>
        <tr>
          <th>{'Column 1'}</th>
          <th>{'Column 2'}</th>
          <th>{'Column 3'}</th>
          <th>{'Column 4'}</th>
          <th>{''}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td align="right">
            {' '}
            <Button
                onClick={() => alert('button clicked!')}
                text="Action"
                variant="secondary"
            />
            {' '}
          </td>
        </tr>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td align="right">
            {' '}
            <Button
                onClick={() => alert('button clicked!')}
                text="Action"
                variant="secondary"
            />
            {' '}
          </td>
        </tr>
        <tr>
          <td>{'Value 1'}</td>
          <td>{'Value 2'}</td>
          <td>{'Value 3'}</td>
          <td>{'Value 4'}</td>
          <td align="right">
            {' '}
            <Button
                onClick={() => alert('button clicked!')}
                text="Action"
                variant="secondary"
            />
            {' '}
          </td>
        </tr>
      </tbody>
    </Table>
  )
}

export default TableOuterPadding

Table with Collapsible

The collapsible prop can be used on any Table Row to add a collapsible area. Use the additional collapsibleContent prop to add any content to the collapsible Row.

import React from 'react'

import { Table, Icon, Card, Body } from 'playbook-ui'

const TableWithCollapsible = (props) => {

  const Content = () => {
    return (
      <Card 
          borderNone
          borderRadius="none"
          padding="md"
      >
        <Body>Nested content inside a Table Row</Body>
      </Card>
    );
  };

  return (
      <Table
          size="sm"
      >
        <Table.Head>
          <Table.Row>
            <Table.Header>{'Column 1'}</Table.Header>
            <Table.Header>{'Column 2'}</Table.Header>
            <Table.Header>{'Column 3'}</Table.Header>
            <Table.Header>{'Column 4'}</Table.Header>
            <Table.Header>{'Column 5'}</Table.Header>
            <Table.Header>{''}</Table.Header>
          </Table.Row>

        </Table.Head>
        <Table.Body>
          <Table.Row collapsible 
              collapsibleContent={<Content/>}
          >
            <Table.Cell>{'Value 1'}</Table.Cell>
            <Table.Cell>{'Value 2'}</Table.Cell>
            <Table.Cell>{'Value 3'}</Table.Cell>
            <Table.Cell>{'Value 4'}</Table.Cell>
            <Table.Cell>{'Value 5'}</Table.Cell>
            <Table.Cell textAlign="right">{ 
              <Icon
                  color="primary"
                  fixedWidth
                  icon="chevron-down"
              />}
            </Table.Cell>

          </Table.Row>
          <Table.Row>
            <Table.Cell>{'Value 1'}</Table.Cell>
            <Table.Cell>{'Value 2'}</Table.Cell>
            <Table.Cell>{'Value 3'}</Table.Cell>
            <Table.Cell>{'Value 4'}</Table.Cell>
            <Table.Cell>{'Value 5'}</Table.Cell>
            <Table.Cell>{''}</Table.Cell>
          </Table.Row>
          <Table.Row>
            <Table.Cell>{'Value 1'}</Table.Cell>
            <Table.Cell>{'Value 2'}</Table.Cell>
            <Table.Cell>{'Value 3'}</Table.Cell>
            <Table.Cell>{'Value 4'}</Table.Cell>
            <Table.Cell>{'Value 5'}</Table.Cell>
            <Table.Cell>{''}</Table.Cell>
          </Table.Row>
        </Table.Body>
      </Table>
  )
}

export default TableWithCollapsible

Table with Collapsible with Custom Click

When using the collapsible prop, the default functionality is that the entire Row will be clickable to toggle the Row. To limit the click event to a specific Table Cell, you can use the toggleCellId prop to pass in the id of the Cell you want to use as the trigger.
NOTE: toggleCellId and the id on the Cell you want to use as the trigger MUST be the same.

import React from 'react'

import { Table, Icon, Card, Body } from 'playbook-ui'

const TableWithCollapsibleWithCustomClick = (props) => {

  const Content = () => {
    return (
      <Card
          borderNone
          borderRadius="none"
          padding="md"
      >
        <Body>Nested content inside a Table Row</Body>
      </Card>
    );
  };

return (
      <Table
          size="sm"
      >
        <Table.Head>
          <Table.Row>
            <Table.Header>{'Column 1'}</Table.Header>
            <Table.Header>{'Column 2'}</Table.Header>
            <Table.Header>{'Column 3'}</Table.Header>
            <Table.Header>{'Column 4'}</Table.Header>
            <Table.Header>{'Column 5'}</Table.Header>
            <Table.Header>{''}</Table.Header>
          </Table.Row>

        </Table.Head>
        <Table.Body>
          <Table.Row collapsible
              collapsibleContent={<Content/>}
              toggleCellId="cell-1"
          >
            <Table.Cell>{'Value 1'}</Table.Cell>
            <Table.Cell>{'Value 2'}</Table.Cell>
            <Table.Cell>{'Value 3'}</Table.Cell>
            <Table.Cell>{'Value 4'}</Table.Cell>
            <Table.Cell>{'Value 5'}</Table.Cell>
            <Table.Cell cursor="pointer"
                id="cell-1"
                textAlign="right"
            >
              <Icon
                  color="primary"
                  fixedWidth
                  icon="chevron-down"
              />
            </Table.Cell>

          </Table.Row>
          <Table.Row collapsible
              collapsibleContent={<Content/>}
              toggleCellId="cell-2"
          >
            <Table.Cell>{'Value 1'}</Table.Cell>
            <Table.Cell>{'Value 2'}</Table.Cell>
            <Table.Cell>{'Value 3'}</Table.Cell>
            <Table.Cell>{'Value 4'}</Table.Cell>
            <Table.Cell>{'Value 5'}</Table.Cell>
            <Table.Cell cursor="pointer"
                id="cell-2"
                textAlign="right"
            >
              <Icon
                  color="primary"
                  fixedWidth
                  icon="chevron-down"
              />
            </Table.Cell>

          </Table.Row>
          <Table.Row collapsible
              collapsibleContent={<Content/>}
              toggleCellId="cell-3"
          >
            <Table.Cell>{'Value 1'}</Table.Cell>
            <Table.Cell>{'Value 2'}</Table.Cell>
            <Table.Cell>{'Value 3'}</Table.Cell>
            <Table.Cell>{'Value 4'}</Table.Cell>
            <Table.Cell>{'Value 5'}</Table.Cell>
            <Table.Cell cursor="pointer"
                id="cell-3"
                textAlign="right"
            >
              <Icon
                  color="primary"
                  fixedWidth
                  icon="chevron-down"
              />
            </Table.Cell>

          </Table.Row>
        </Table.Body>
      </Table>
  )
}

export default TableWithCollapsibleWithCustomClick

Table with Collapsible with Custom Content

import React from 'react'

import { Table, Icon, Card, Body, Image, Flex } from 'playbook-ui'

const TableWithCollapsibleWithCustomContent = (props) => {

  const Content = () => {
    return (
      <Card 
          borderNone
          borderRadius="none"
          color="light"
          paddingX="xl"
          paddingY="md"
      >
         <Body paddingBottom="sm"
             text="Expanded Custom Layout"
         />
         <Flex justify="between">
           <Image
               size="sm"
               url="https://unsplash.it/500/400/?image=634"
           />
           <Image
               size="sm"
               url="https://unsplash.it/500/400/?image=634"
           />
           <Image
               size="sm"
               url="https://unsplash.it/500/400/?image=634"
           />
           <Image
               size="sm"
               url="https://unsplash.it/500/400/?image=634"
           />
          </Flex>
      </Card>
    );
  };

    return (
    <Table
        size="sm"
    >
      <Table.Head>
        <Table.Row>
          <Table.Header>{'Column 1'}</Table.Header>
          <Table.Header>{'Column 2'}</Table.Header>
          <Table.Header>{'Column 3'}</Table.Header>
          <Table.Header>{'Column 4'}</Table.Header>
          <Table.Header>{'Column 5'}</Table.Header>
          <Table.Header>{''}</Table.Header>
        </Table.Row>

      </Table.Head>
      <Table.Body>
        <Table.Row collapsible
            collapsibleContent={<Content/>}
        >
          <Table.Cell>{'Value 1'}</Table.Cell>
          <Table.Cell>{'Value 2'}</Table.Cell>
          <Table.Cell>{'Value 3'}</Table.Cell>
          <Table.Cell>{'Value 4'}</Table.Cell>
          <Table.Cell>{'Value 5'}</Table.Cell>
          <Table.Cell textAlign="right">{
            <Icon
                color="primary"
                fixedWidth
                icon="chevron-down"
            />}
          </Table.Cell>

        </Table.Row>
        <Table.Row>
          <Table.Cell>{'Value 1'}</Table.Cell>
          <Table.Cell>{'Value 2'}</Table.Cell>
          <Table.Cell>{'Value 3'}</Table.Cell>
          <Table.Cell>{'Value 4'}</Table.Cell>
          <Table.Cell>{'Value 5'}</Table.Cell>
          <Table.Cell>{''}</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>{'Value 1'}</Table.Cell>
          <Table.Cell>{'Value 2'}</Table.Cell>
          <Table.Cell>{'Value 3'}</Table.Cell>
          <Table.Cell>{'Value 4'}</Table.Cell>
          <Table.Cell>{'Value 5'}</Table.Cell>
          <Table.Cell>{''}</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
  )
}

export default TableWithCollapsibleWithCustomContent

Table with Collapsible with Nested Rows

The collapsibleContent can display any content, including nested Table Rows.

Additionally, the collapsibleSideHighlight can also be removed by setting it to false if needed. This prop is set to true by default.

NOTE: We advise against using the disableHover Table prop when nesting Table Rows within a Table.

import React from 'react'

import { Table, Icon, Background } from 'playbook-ui'

const TableWithCollapsibleWithNestedRows = (props) => {

  const Content = () => {
    return (
      <Table 
          borderRadius="none"
          container={false}
          size="sm"
      >
      <Background tag="tr"
      >
        <Table.Cell>Expanded</Table.Cell>
        <Table.Cell>Expanded</Table.Cell>
        <Table.Cell>Expanded</Table.Cell>
        <Table.Cell>Expanded</Table.Cell>
        <Table.Cell>Expanded</Table.Cell>
      </Background>
      </Table>
    );
  };

    return (
    <Table
        size="sm"
    >
      <Table.Head>
        <Table.Row>
          <Table.Header>{'Column 1'}</Table.Header>
          <Table.Header>{'Column 2'}</Table.Header>
          <Table.Header>{'Column 3'}</Table.Header>
          <Table.Header>{'Column 4'}</Table.Header>
          <Table.Header>{'Column 5'}</Table.Header>
          <Table.Header>{''}</Table.Header>
        </Table.Row>

      </Table.Head>
      <Table.Body>
        <Table.Row collapsible 
            collapsibleContent={<Content/>}
            collapsibleSideHighlight={false}
        >
          <Table.Cell>{'Value 1'}</Table.Cell>
          <Table.Cell>{'Value 2'}</Table.Cell>
          <Table.Cell>{'Value 3'}</Table.Cell>
          <Table.Cell>{'Value 4'}</Table.Cell>
          <Table.Cell>{'Value 5'}</Table.Cell>
          <Table.Cell textAlign="right">{ 
            <Icon
                color="primary"
                fixedWidth
                icon="chevron-down"
            />}
          </Table.Cell>

        </Table.Row>
        <Table.Row>
          <Table.Cell>{'Value 1'}</Table.Cell>
          <Table.Cell>{'Value 2'}</Table.Cell>
          <Table.Cell>{'Value 3'}</Table.Cell>
          <Table.Cell>{'Value 4'}</Table.Cell>
          <Table.Cell>{'Value 5'}</Table.Cell>
          <Table.Cell>{''}</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>{'Value 1'}</Table.Cell>
          <Table.Cell>{'Value 2'}</Table.Cell>
          <Table.Cell>{'Value 3'}</Table.Cell>
          <Table.Cell>{'Value 4'}</Table.Cell>
          <Table.Cell>{'Value 5'}</Table.Cell>
          <Table.Cell>{''}</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
  )
}

export default TableWithCollapsibleWithNestedRows

Table with Collapsible with Nested Table

The collapsibleContent can also be used to display nested Tables within each Row.

NOTE: We advise against using the disableHover Table prop when nesting Tables within a Table.

import React from 'react'

import { Pill, Background, Table, Icon } from 'playbook-ui'

const TableWithCollapsibleWithNestedTable = (props) => {

  const Content = () => {
    return (
        <Table 
            borderRadius="none"
            container={false} 
            size="sm"
        >
          <Table.Head>
            <Background
                tag="tr"
            >
              <Table.Header>{"Alt Header"}</Table.Header>
              <Table.Header>{"Alt Header"}</Table.Header>
              <Table.Header>{"Alt Header"}</Table.Header>
              <Table.Header>{"Alt Header"}</Table.Header>
            </Background>
          </Table.Head>
          <Table.Body>
            <Table.Row>
              <Table.Cell>{"Expanded"}</Table.Cell>
              <Table.Cell>{"Expanded"}</Table.Cell>
              <Table.Cell>{"Expanded"}</Table.Cell>
              <Table.Cell>
                  <Pill text="Pill" 
                      variant="primary"
                  />
              </Table.Cell>
            </Table.Row>
            <Table.Row>
              <Table.Cell>{"Expanded"}</Table.Cell>
              <Table.Cell>{"Expanded"}</Table.Cell>
              <Table.Cell>{"Expanded"}</Table.Cell>
              <Table.Cell>
                  <Pill text="Pill" 
                      variant="primary"
                  />
              </Table.Cell>
            </Table.Row>
            <Table.Row>
              <Table.Cell>{"Expanded"}</Table.Cell>
              <Table.Cell>{"Expanded"}</Table.Cell>
              <Table.Cell>{"Expanded"}</Table.Cell>
              <Table.Cell>
                  <Pill text="Pill" 
                      variant="primary"
                  />
              </Table.Cell>
            </Table.Row>
          </Table.Body>
        </Table>
    );
  };

    return (
    <Table
        size="sm"
    >
      <Table.Head>
        <Table.Row>
          <Table.Header>{'Column 1'}</Table.Header>
          <Table.Header>{'Column 2'}</Table.Header>
          <Table.Header>{'Column 3'}</Table.Header>
          <Table.Header>{'Column 4'}</Table.Header>
          <Table.Header>{'Column 5'}</Table.Header>
          <Table.Header>{''}</Table.Header>
        </Table.Row>

      </Table.Head>
      <Table.Body>
        <Table.Row collapsible 
            collapsibleContent={<Content/>}
            collapsibleSideHighlight={false}
        >
          <Table.Cell>{'Value 1'}</Table.Cell>
          <Table.Cell>{'Value 2'}</Table.Cell>
          <Table.Cell>{'Value 3'}</Table.Cell>
          <Table.Cell>{'Value 4'}</Table.Cell>
          <Table.Cell>{'Value 5'}</Table.Cell>
          <Table.Cell textAlign="right">{ 
            <Icon
                color="primary"
                fixedWidth
                icon="chevron-down"
            />}
          </Table.Cell>

        </Table.Row>
        <Table.Row>
          <Table.Cell>{'Value 1'}</Table.Cell>
          <Table.Cell>{'Value 2'}</Table.Cell>
          <Table.Cell>{'Value 3'}</Table.Cell>
          <Table.Cell>{'Value 4'}</Table.Cell>
          <Table.Cell>{'Value 5'}</Table.Cell>
          <Table.Cell>{''}</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>{'Value 1'}</Table.Cell>
          <Table.Cell>{'Value 2'}</Table.Cell>
          <Table.Cell>{'Value 3'}</Table.Cell>
          <Table.Cell>{'Value 4'}</Table.Cell>
          <Table.Cell>{'Value 5'}</Table.Cell>
          <Table.Cell>{''}</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
  )
}

export default TableWithCollapsibleWithNestedTable

Table with Clickable Rows

Clickable table rows do not require any additional props. This doc example showcases how to set them up using html_options/htmlOptions and click events. Using the global prop for cursor to set it to "pointer" is also recommended for better UX.

import React from 'react'

import { Table, Icon } from 'playbook-ui'

const TableWithClickableRows = (props) => {

  return (
      <Table 
          size="sm"
      >
          <Table.Head>
              <Table.Row>
                  <Table.Header>{"Column 1"}</Table.Header>
                  <Table.Header>{"Column 2"}</Table.Header>
                  <Table.Header>{"Column 3"}</Table.Header>
                  <Table.Header>{"Column 4"}</Table.Header>
                  <Table.Header>{"Column 5"}</Table.Header>
                  <Table.Header>{""}</Table.Header>
              </Table.Row>
          </Table.Head>
          <Table.Body>
              <Table.Row
                  cursor="pointer"
                  htmlOptions={{ onClick: () => alert("Row 1 clicked") }}
              >
                <Table.Cell>{"Value 1"}</Table.Cell>
                <Table.Cell>{"Value 2"}</Table.Cell>
                <Table.Cell>{"Value 3"}</Table.Cell>
                <Table.Cell>{"Value 4"}</Table.Cell>
                <Table.Cell>{"Value 5"}</Table.Cell>
                <Table.Cell textAlign="right">
                    <Icon 
                        color="primary_action"
                        fixedWidth
                        icon="chevron-right" 
                        size="xs"
                    />
                </Table.Cell>
              </Table.Row>
              <Table.Row
                  cursor="pointer"
                  htmlOptions={{ onClick: () => alert("Row 2 clicked") }}
              >
                  <Table.Cell>{"Value 1"}</Table.Cell>
                  <Table.Cell>{"Value 2"}</Table.Cell>
                  <Table.Cell>{"Value 3"}</Table.Cell>
                  <Table.Cell>{"Value 4"}</Table.Cell>
                  <Table.Cell>{"Value 5"}</Table.Cell>
                  <Table.Cell textAlign="right">
                      <Icon 
                          color="primary_action"
                          fixedWidth
                          icon="chevron-right" 
                          size="xs"
                      />                
                  </Table.Cell>
              </Table.Row>
              <Table.Row
                  cursor="pointer"
                  htmlOptions={{ onClick: () => alert("Row 3 clicked") }}
              >
                  <Table.Cell>{"Value 1"}</Table.Cell>
                  <Table.Cell>{"Value 2"}</Table.Cell>
                  <Table.Cell>{"Value 3"}</Table.Cell>
                  <Table.Cell>{"Value 4"}</Table.Cell>
                  <Table.Cell>{"Value 5"}</Table.Cell>
                  <Table.Cell textAlign="right">
                      <Icon 
                          color="primary_action"
                          fixedWidth
                          icon="chevron-right" 
                          size="xs"
                      />
                  </Table.Cell>
              </Table.Row>
          </Table.Body>
      </Table>
  )
}

export default TableWithClickableRows

Table with Selectable Rows

Use the Checkbox kit with the Table to achieve the selectable row functionality seen here.

import React, { useState } from 'react'

import { Table, Image, Flex, Checkbox, Button } from 'playbook-ui'

const TableWithSelectableRows = (props) => {
    const [checkboxes, setCheckboxes] = useState([
        { name: "Coffee", checked: false },
        { name: "Ice Cream", checked: false },
        { name: "Chocolate", checked: true },
    ]);

    const isAllChecked = !checkboxes.find((checkbox) => !checkbox.checked);
    const isNoneChecked = !checkboxes.find((checkbox) => checkbox.checked);

    const processCheckboxes = (checked) =>
        checkboxes.slice(0).map((checkbox) => {
            checkbox.checked = checked;
            return checkbox;
        });

    const onToggleAll = () => {
        setCheckboxes(
            isNoneChecked ? processCheckboxes(true) : processCheckboxes(false)
        );
    };

    const updateCheckboxes = (checkbox, index) => {
        const newCheckboxes = checkboxes.slice(0);
        newCheckboxes[index].checked = !checkbox.checked;
        setCheckboxes(newCheckboxes);
    };

    return (
        <>
            <Flex
                justify="end"
                marginBottom="sm"
            >
                {!isNoneChecked && (
                    <Flex
                        justify="end"
                        marginBottom="sm"
                    >
                        <Button>Delete</Button>
                    </Flex>
                )}
            </Flex>
            <Table
                size="sm"
            >
                <Table.Head>
                    <Table.Row>
                        <Table.Header>
                            <Checkbox
                                checked={isAllChecked}
                                indeterminate={!isAllChecked && !isNoneChecked}
                                name="checkbox-name"
                                onChange={onToggleAll}
                                value="check-box value"
                            />
                        </Table.Header>
                        <Table.Header>{"Column 1"}</Table.Header>
                        <Table.Header>{"Column 2"}</Table.Header>
                        <Table.Header>{"Column 3"}</Table.Header>
                        <Table.Header>{"Column 4"}</Table.Header>
                        <Table.Header>{"Column 5"}</Table.Header>
                    </Table.Row>
                </Table.Head>
                <Table.Body>
                    {checkboxes.map((checkbox, index) => (
                        <Table.Row key={index}>
                            <Table.Cell>
                                <Checkbox
                                    checked={checkbox.checked}
                                    name={checkbox.name}
                                    onChange={() => {
                                        updateCheckboxes(checkbox, index);
                                    }}
                                    value="check-box value"
                                />
                            </Table.Cell>
                            <Table.Cell>
                                <Image
                                    alt="picture of a misty forest"
                                    size="xs"
                                    url="https://unsplash.it/500/400/?image=634"
                                />
                            </Table.Cell>
                            <Table.Cell>{"Value 2"}</Table.Cell>
                            <Table.Cell>{"Value 3"}</Table.Cell>
                            <Table.Cell>{"Value 4"}</Table.Cell>
                            <Table.Cell>{"Value 5"}</Table.Cell>
                        </Table.Row>
                    ))}
                </Table.Body>
            </Table>
        </>
    )
}

export default TableWithSelectableRows

Header Style Borderless

Customize your header by removing the header borders with the headerStyle="borderless" prop.

import React from 'react'

import { Table } from 'playbook-ui'

const TableWithHeaderStyleBorderless = (props) => {
  return (
    <>
        <Table
            headerStyle="borderless"
            size="sm"
        >
          <thead>
              <tr>
                  <th>{'Column 1'}</th>
                  <th>{'Column 2'}</th>
                  <th>{'Column 3'}</th>
                  <th>{'Column 4'}</th>
                  <th>{'Column 5'}</th>
              </tr>
          </thead>
          <tbody>
            <tr>
              <td>{'Value 1'}</td>
              <td>{'Value 2'}</td>
              <td>{'Value 3'}</td>
              <td>{'Value 4'}</td>
              <td>{'Value 5'}</td>
            </tr>
            <tr>
              <td>{'Value 1'}</td>
              <td>{'Value 2'}</td>
              <td>{'Value 3'}</td>
              <td>{'Value 4'}</td>
              <td>{'Value 5'}</td>
            </tr>
            <tr>
              <td>{'Value 1'}</td>
              <td>{'Value 2'}</td>
              <td>{'Value 3'}</td>
              <td>{'Value 4'}</td>
              <td>{'Value 5'}</td>
            </tr>
          </tbody>
        </Table>
    </>
  )
}

export default TableWithHeaderStyleBorderless

Header Style Floating

Further customize your header by using the table with background kit logic to give your table header a custom background color. Use the headerStyle="floating" prop to visually nest the borderless table within a card or collapsible with a matching background color (the backgroundColor passed to Background kit should match the background or backgroundColor for the element in which it is nested).

import React from 'react'

import { Background, Card, Table } from 'playbook-ui'

const TableWithHeaderStyleFloating = (props) => {
  return (
    <>
        <Card background="light"
        >
            <Table
                headerStyle="floating"
                size="sm"
            >
              <Table.Head>
                  <Background backgroundColor="light" 
                      tag="tr"
                  >
                      <Table.Header>{'Column 1'}</Table.Header>
                      <Table.Header>{'Column 2'}</Table.Header>
                      <Table.Header>{'Column 3'}</Table.Header>
                      <Table.Header>{'Column 4'}</Table.Header>
                      <Table.Header>{'Column 5'}</Table.Header>
                  </Background>
              </Table.Head>
              <Table.Body>
                <Table.Row>
                  <Table.Cell>{'Value 1'}</Table.Cell>
                  <Table.Cell>{'Value 2'}</Table.Cell>
                  <Table.Cell>{'Value 3'}</Table.Cell>
                  <Table.Cell>{'Value 4'}</Table.Cell>
                  <Table.Cell>{'Value 5'}</Table.Cell>
                </Table.Row>
                <Table.Row>
                  <Table.Cell>{'Value 1'}</Table.Cell>
                  <Table.Cell>{'Value 2'}</Table.Cell>
                  <Table.Cell>{'Value 3'}</Table.Cell>
                  <Table.Cell>{'Value 4'}</Table.Cell>
                  <Table.Cell>{'Value 5'}</Table.Cell>
                </Table.Row>
                <Table.Row>
                  <Table.Cell>{'Value 1'}</Table.Cell>
                  <Table.Cell>{'Value 2'}</Table.Cell>
                  <Table.Cell>{'Value 3'}</Table.Cell>
                  <Table.Cell>{'Value 4'}</Table.Cell>
                  <Table.Cell>{'Value 5'}</Table.Cell>
                </Table.Row>
              </Table.Body>
            </Table>
        </Card>
    </>
  )
}

export default TableWithHeaderStyleFloating

List

Default

import React from 'react'

import { List, ListItem } from 'playbook-ui'

const ListDefault = () => {
  return (
    <>
      <List>
        <ListItem>{'Item 1'}</ListItem>
        <ListItem>{'Item 2'}</ListItem>
        <ListItem>{'Item 3'}</ListItem>
      </List>
    </>
  )
}

export default ListDefault

Large

import React from 'react'

import { List, ListItem } from 'playbook-ui'

const ListLg = (props) => {
  return (
    <>
      <List
          size="large"
      >
        <ListItem>{'Item 1'}</ListItem>
        <ListItem>{'Item 2'}</ListItem>
        <ListItem>{'Item 3'}</ListItem>
        <ListItem>{'Item 4'}</ListItem>
        <ListItem>{'Item 5'}</ListItem>
      </List>
    </>
  )
}

export default ListLg

Ordered

import React from 'react'

import { List, ListItem } from 'playbook-ui'

const ListOrdered = (props) => {
  return (
    <>
      <List
          ordered
      >
        <ListItem>{'Item 1'}</ListItem>
        <ListItem>{'Item 2'}</ListItem>
        <ListItem>{'Item 3'}</ListItem>
        <ListItem>{'Item 4'}</ListItem>
        <ListItem>{'Item 5'}</ListItem>
      </List>
    </>
  )
}

export default ListOrdered

Borderless

import React from 'react'

import { List, ListItem } from 'playbook-ui'

const ListBorderless = (props) => {
  return (
    <>
      <List
          borderless
      >
        <ListItem>{'Item 1'}</ListItem>
        <ListItem>{'Item 2'}</ListItem>
        <ListItem>{'Item 3'}</ListItem>
        <ListItem>{'Item 4'}</ListItem>
        <ListItem>{'Item 5'}</ListItem>
      </List>
    </>
  )
}

export default ListBorderless

Horizontal Padding

import React from 'react'

import { List, ListItem } from 'playbook-ui'

const ListXpadding = (props) => {
  return (
    <>
      <List
          xpadding
      >
        <ListItem>{'Item 1'}</ListItem>
        <ListItem>{'Item 2'}</ListItem>
        <ListItem>{'Item 3'}</ListItem>
        <ListItem>{'Item 4'}</ListItem>
        <ListItem>{'Item 5'}</ListItem>
      </List>
    </>
  )
}

export default ListXpadding

Layout Left

import React from 'react'

import { List, ListItem, Currency, Title } from 'playbook-ui'

const ListLayoutLeft = (props) => {
  return (
    <>
      <List
          layout="left"
      >
        <ListItem>
          <Title
              size={4}
              text="Label"
          />
          <Currency
              amount="2,000.50"
              label="Caption"
              size="sm"
          />
        </ListItem>

        <ListItem>
          <Title
              size={4}
              text="Label"
          />
          <Currency
              amount="2,000.50"
              label="Caption"
              size="sm"
          />
        </ListItem>

        <ListItem>
          <Title
              size={4}
              text="Label"
          />
          <Currency
              amount="2,000.50"
              label="Caption"
              size="sm"
          />
        </ListItem>

        <ListItem>
          <Title
              size={4}
              text="Label"
          />
          <Currency
              amount="2,000.50"
              label="Caption"
              size="sm"
          />
        </ListItem>

        <ListItem>
          <Title
              size={4}
              text="Label"
          />
          <Currency
              amount="2,000.50"
              label="Caption"
              size="sm"
          />
        </ListItem>
      </List>
    </>
  )
}

export default ListLayoutLeft

Layout Right

import React from 'react'

import { List, ListItem, Currency, Title } from 'playbook-ui'

const ListLayoutRight = (props) => {
  return (
    <>
      <List
          layout="right"
      >
        <ListItem>
          <Title
              size={4}
              text="Label"
          />
          <Currency
              amount="2,000.50"
              label="Caption"
              size="sm"
          />
        </ListItem>

        <ListItem>
          <Title
              size={4}
              text="Label"
          />
          <Currency
              amount="2,000.50"
              label="Caption"
              size="sm"
          />
        </ListItem>

        <ListItem>
          <Title
              size={4}
              text="Label"
          />
          <Currency
              amount="2,000.50"
              label="Caption"
              size="sm"
          />
        </ListItem>

        <ListItem>
          <Title
              size={4}
              text="Label"
          />
          <Currency
              amount="2,000.50"
              label="Caption"
              size="sm"
          />
        </ListItem>

        <ListItem>
          <Title
              size={4}
              text="Label"
          />
          <Currency
              amount="2,000.50"
              label="Caption"
              size="sm"
          />
        </ListItem>
      </List>
    </>
  )
}

export default ListLayoutRight

Filter

Default

To display the "No Filters Selected" text, the filters prop must be null. As a suggestion, check the values of each key in your filters object. If they are all falsy, return null.

import React from 'react'

import { Button, Filter, Flex, Select, TextInput } from 'playbook-ui'

const SortingChangeCallback = (sortOptions) => {
  alert(JSON.stringify(sortOptions[0]))
}

const FilterDefault = (props) => {
  const options = [
    { value: 'USA' },
    { value: 'Canada' },
    { value: 'Brazil' },
    { value: 'Philippines' },
    { value: 'A galaxy far far away, like really far away...' },
  ]
  return (

    <>
      <Filter
          double
          filters={{
            'Full Name': 'John Wick',
            'City': 'San Francisco',
          }}
          marginBottom="xl"
          minWidth="375px"
          onSortChange={SortingChangeCallback}
          results={1}
          sortOptions={{
            popularity: 'Popularity',
            // eslint-disable-next-line
            manager_title: 'Manager\'s Title',
            // eslint-disable-next-line
            manager_name: 'Manager\'s Name',
          }}
          sortValue={[{ name: 'popularity', dir: 'desc' }]}
      >
      {({ closePopover }) => (
        <form>

          <TextInput
              label="Full Name"
              placeholder="Enter name"
          />

          <Select
              blankSelection="Select One..."
              label="Territory"
              maxWidth="sm"
              name="location"
              options={options}
          />
          <Flex
              spacing="between"
          >
            <Button
                onClick={closePopover}
                text="Apply"
            />
            <Button
                text="Clear"
                variant="secondary"
            />
          </Flex>
        </form>
      )}

      </Filter>

      <Filter
          double
          minWidth="375px"
          onSortChange={SortingChangeCallback}
          results={0}
          sortOptions={{
            popularity: 'Popularity',
            // eslint-disable-next-line
            manager_title: 'Manager\'s Title',
            // eslint-disable-next-line
            manager_name: 'Manager\'s Name',
          }}
          sortValue={[{ name: 'popularity', dir: 'desc' }]}
      >
      {({ closePopover }) => (
        <form>

          <TextInput
              label="Example Text Field"
              placeholder="Enter Text"
          />

          <Select
              blankSelection="Select One..."
              label="Example Collection Select"
              name="Collection Select"
              options={options}
          />
          <Flex
              spacing="between"
          >
            <Button
                onClick={closePopover}
                text="Apply"
            />
            <Button
                text="Clear"
                variant="secondary"
            />
          </Flex>
        </form>
      )}
      </Filter>
    </>
  )
}

export default FilterDefault

No Background

To remove the background from a filter, add the prop background with a value of false.

import React from 'react'

import { Button, Filter, Flex, Select, TextInput } from 'playbook-ui'

const FilterNoBackground = (props) => {
  const options = [
    { value: 'USA' },
    { value: 'Canada' },
    { value: 'Brazil' },
    { value: 'Philippines' },
    { value: 'A galaxy far far away...' },
  ]
  return (
    <>
      <Filter
          background={false}
          filters={{
          'Full Name': 'John Wick',
          'City': 'Las Vegas',
        }}
          marginBottom="xl"
          minWidth="360px"
          results={3}
          sortOptions={{
          popularity: 'Popularity',
          // eslint-disable-next-line
          manager_title: 'Manager\'s Title',
          // eslint-disable-next-line
          manager_name: 'Manager\'s Name',
        }}
          sortValue={[{ name: 'popularity', dir: 'desc' }]}
      >
      {({ closePopover }) => (
        <form>

          <TextInput
              label="Full Name"
              placeholder="Enter name"
          />

          <Select
              blankSelection="Select One..."
              label="Territory"
              name="location"
              options={options}
          />
          <Flex
              spacing="between"
          >
            <Button
                onClick={closePopover}
                text="Apply"
            />
            <Button
                text="Clear"
                variant="secondary"
            />
          </Flex>
        </form>
      )}

      </Filter>

      <Filter
          background={false}
          double
          filters={{
          'Full Name': 'John Wick',
          'City': 'Las Vegas',
        }}
          minWidth="360px"
          results={3}
          sortOptions={{
          popularity: 'Popularity',
          // eslint-disable-next-line
          manager_title: 'Manager\'s Title',
          // eslint-disable-next-line
          manager_name: 'Manager\'s Name',
        }}
          sortValue={[{ name: 'popularity', dir: 'desc' }]}
      >
      {({ closePopover }) => (
        <form>

          <TextInput
              label="Full Name"
              placeholder="Enter name"
          />

          <Select
              blankSelection="Select One..."
              label="Territory"
              name="location"
              options={options}
          />
          <Flex
              spacing="between"
          >
            <Button
                onClick={closePopover}
                text="Apply"
            />
            <Button
                text="Clear"
                variant="secondary"
            />
          </Flex>
        </form>
      )}
      </Filter>
    </>
  )
}

export default FilterNoBackground

Single

import React from 'react'

import { Filter, Button, Flex, Select, TextInput } from 'playbook-ui'

const FilterSingle = (props) => {
  const options = [
    { value: 'USA' },
    { value: 'Canada' },
    { value: 'Brazil' },
    { value: 'Philippines' },
    { value: 'A galaxy far far away...' },
  ]
  return (
    <Filter
        filters={{
          'Full Name': 'John Wick',
        }}
        minWidth="360px"
        results={546}
        sortOptions={{
          popularity: 'Popularity',
          // eslint-disable-next-line
          manager_title: 'Manager\'s Title',
          // eslint-disable-next-line
          manager_name: 'Manager\'s Name',
        }}
        sortValue={[{ name: 'popularity', dir: 'desc' }]}
    >
    {({ closePopover }) => (
      <form>
        <TextInput
            label="Full Name"
            placeholder="Enter name"
        />

        <Select
            blankSelection="Select One..."
            label="Territory"
            name="location"
            options={options}
        />
        <Flex
            spacing="between"
        >
          <Button
              onClick={closePopover}
              text="Apply"
          />
          <Button
              text="Clear"
              variant="secondary"
          />
        </Flex>
      </form>
    )}
    </Filter>
  )
}

export default FilterSingle

No Sort

To display results, use templates single or default.

import React from 'react'

import { Button, Filter, Flex, Select, TextInput } from 'playbook-ui'

const FilterNoSort = (props) => {
  const options = [
    { value: 'USA' },
    { value: 'Canada' },
    { value: 'Brazil' },
    { value: 'Philippines' },
    { value: 'A galaxy far far away...' },
  ]
  return (
    <Filter
        filters={{
          'Full Name': 'John Wick',
        }}
        minWidth="360px"
        results={546}
        sortValue={[{ name: 'popularity', dir: 'desc' }]}
    >
    {({ closePopover }) => (
      <form>
        <TextInput
            label="Full Name"
            placeholder="Enter name"
        />

        <Select
            blankSelection="Select One..."
            label="Territory"
            name="location"
            options={options}
        />
        <Flex
            spacing="between"
        >
          <Button
              onClick={closePopover}
              text="Apply"
          />
          <Button
              text="Clear"
              variant="secondary"
          />
        </Flex>
      </form>
    )}
    
    </Filter>
  )
}

export default FilterNoSort

Filter Only

import React from 'react'

import { Button, Filter, Flex, Select, TextInput } from 'playbook-ui'

const FilterOnly = (props) => {
  const options = [
    { value: 'USA' },
    { value: 'Canada' },
    { value: 'Brazil' },
    { value: 'Philippines' },
    { value: 'A galaxy far far away...' },
  ]
  return (
    <Filter
        filters={{ 'Full Name': 'John Wick' }}
        minWidth="360px"
    >
    {({ closePopover }) => (
      <form>

        <TextInput
            label="Full Name"
            placeholder="Enter name"
        />

        <Select
            blankSelection="Select One..."
            label="Territory"
            name="location"
            options={options}
        />
        <Flex
            spacing="between"
        >
          <Button
              onClick={closePopover}
              text="Apply"
          />
          <Button
              text="Clear"
              variant="secondary"
          />
        </Flex>
      </form>
    )}

    </Filter>
  )
}

export default FilterOnly

Sort Only

import React from 'react'

import { Filter } from 'playbook-ui'

const SortOnly = (props) => (
  <Filter
      sortOptions={{
        popularity: 'Popularity',
        // eslint-disable-next-line
        manager_title: 'Manager\'s Title',
        // eslint-disable-next-line
        manager_name: 'Manager\'s Name',
      }}
      sortValue={[{ name: 'popularity', dir: 'desc' }]}
  />
)

export default SortOnly

Max Width for Popover Inside of Filter

Filter can leverage the max-width property. Learn more in our visual guidelines.

import React from 'react'

import { Button, Filter, Flex, Select } from 'playbook-ui'

const FilterMaxWidth = (props) => {
  const options = [
    { value: 'USA' },
    { value: 'Canada' },
    { value: 'Brazil' },
    { value: 'Philippines' },
    { value: 'A galaxy far far away, like really far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far away...' },
  ]
  return (
    <Filter
        double
        filters={{
          'Full Name': 'John Wick',
          'City': 'San Francisco',
        }}
        minWidth="360px"
        results={1}
        sortOptions={{
          popularity: 'Popularity',
          // eslint-disable-next-line
          manager_title: 'Manager\'s Title',
          // eslint-disable-next-line
          manager_name: 'Manager\'s Name',
        }}
        sortValue={[{ name: 'popularity', dir: 'desc' }]}
    >
    {({ closePopover }) => (
      <form>

      <Select
          blankSelection="Select One..."
          label="Territory"
          maxWidth="sm"
          name="location"
          options={options}
      />
        <Button
            text="Apply"
        />

        <Select
            blankSelection="Select One..."
            label="Territory"
            name="location"
            options={options}
        />
        <Flex
            spacing="between"
        >
          <Button
              onClick={closePopover}
              text="Apply"
          />
          <Button
              text="Clear"
              variant="secondary"
          />
        </Flex>
      </form>
    )}
    </Filter>
  )
}

export default FilterMaxWidth

Max Height for Popover Inside of Filter

import React from 'react'

import { Button, Filter, Flex, Select, TextInput } from 'playbook-ui'

const FilterMaxHeight = (props) => {
  const options = [
    { value: 'USA' },
    { value: 'Canada' },
    { value: 'Brazil' },
    { value: 'Philippines' },
    { value: 'A galaxy far far away, like really far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far away...' },
  ]
  return (
    <Filter
        double
        filters={{
          'Full Name': 'John Wick',
          'City': 'San Francisco',
        }}
        maxHeight="360px"
        minWidth="360px"
        results={1}
        sortOptions={{
          popularity: 'Popularity',
          // eslint-disable-next-line
          manager_title: 'Manager\'s Title',
          // eslint-disable-next-line
          manager_name: 'Manager\'s Name',
        }}
        sortValue={[{ name: 'popularity', dir: 'desc' }]}
    >
    {({ closePopover }) => (
      <form>
        <Select
            blankSelection="Select One..."
            label="Territory"
            name="location"
            options={options}
        />
        <TextInput
            label="First Name"
            placeholder="Enter name"
        />
        <TextInput
            label="Middle Name"
            placeholder="Enter name"
        />
        <TextInput
            label="Last Name"
            placeholder="Enter name"
        />
        <TextInput
            label="Email"
            placeholder="Enter email"
        />
        <TextInput
            label="Address"
            placeholder="Enter address"
        />
        <Flex
            spacing="between"
        >
          <Button
              onClick={closePopover}
              text="Apply"
          />
          <Button
              text="Clear"
              variant="secondary"
          />
        </Flex>
      </form>
    )}
    </Filter>
  )
}

export default FilterMaxHeight

Filter Placement

Click the filter button above to toggle the popover.

import React from 'react'

import { Button, Filter, Flex, Select, TextInput } from 'playbook-ui'

const SortingChangeCallback = (sortOptions) => {
  alert(JSON.stringify(sortOptions[0]))
}

const FilterPlacement = (props) => {
  const options = [
    { value: 'USA' },
    { value: 'Canada' },
    { value: 'Brazil' },
    { value: 'Philippines' },
    { value: 'A galaxy far far away...' },
  ]
  return (

    <>
      <Filter
          double
          minWidth="360px"
          onSortChange={SortingChangeCallback}
          placement={"right"}
          results={1}
          sortOptions={{
            popularity: 'Popularity',
            // eslint-disable-next-line
            manager_title: 'Manager\'s Title',
            // eslint-disable-next-line
            manager_name: 'Manager\'s Name',
          }}
          sortValue={[{ name: 'popularity', dir: 'desc' }]}
      >
      {({ closePopover }) => (
        <form>

          <TextInput
              label="Example Text Field"
              placeholder="Enter Text"
          />

          <Select
              blankSelection="Select One..."
              label="Example Collection Select"
              name="Collection Select"
              options={options}
          />
          <Flex
              spacing="between"
          >
            <Button
                onClick={closePopover}
                text="Apply"
            />
            <Button
                text="Clear"
                variant="secondary"
            />
          </Flex>
        </form>
      )}
      </Filter>
    </>
  )
}

export default FilterPlacement

Sidebar

import React, { useState } from 'react'

import { Filter, Select, TextInput, useCollapsible, SectionSeparator, Checkbox, Flex, Table, Caption, Icon } from 'playbook-ui'

const people = [
  { name: 'Hera Syndulla', territory: 'A galaxy far far away, like really far away...', products: ['Insulation'] },
  { name: 'Kanan Jarrus', territory: 'USA', products: ['Siding', 'Roofing', 'Gutters'] },
  { name: 'C1-10P', territory: 'USA', products: ['Roofing'] },
  { name: 'Anakin Skywalker', territory: 'A galaxy far far away, like really far away...', products: ['Doors', 'Windows', 'Solar'] },
  { name: 'Leia Organa', territory: 'Canada', products: ['Windows', 'Doors'] },
  { name: 'Luke Skywalker', territory: 'Brazil', products: ['Solar', 'Roofing'] },
  { name: 'Padmé Amidala', territory: 'Philippines', products: ['Siding', 'Gutters'] },
  { name: 'Obi-Wan Kenobi', territory: 'USA', products: ['Windows', 'Siding'] },
  { name: 'Ahsoka Tano', territory: 'Canada', products: ['Insulation', 'Solar'] },
  { name: 'Boba Fett', territory: 'Brazil', products: ['Roofing', 'Gutters'] },
  { name: 'Mace Windu', territory: 'Philippines', products: ['Doors', 'Siding'] },
  { name: 'Grogu', territory: 'A galaxy far far away, like really far away...', products: ['Insulation'] },
  { name: 'Sabine Wren', territory: 'Canada', products: ['Solar', 'Doors'] },
  { name: 'C-3PO', territory: 'Brazil', products: ['Windows'] },
  { name: 'R2-D2', territory: 'Philippines', products: ['Doors', 'Gutters'] },
]

const FilterSidebar = (props) => {
  const [name, setName] = useState('')
  const [ territory, setTerritory ] = useState('')
  const [ products, setProducts ] = useState({})
  const handleUpdateName = ({ target }) => {
    setName(target.value)
  }
  const handleUpdateTerritory = ({ target }) => {
    setTerritory(target.value)
  }
  const handleCheckboxChange = ({ target }) => {
    setProducts(prev => ({
      ...prev,
      [target.name]: !prev[target.name],
    }))
  }
  const [isCollapsed, setIsCollapsed] = useCollapsible(true)
  const [isProductsCollapsed, setIsProductsCollapsed] = useCollapsible(true)
  const options = [
    { value: 'USA' },
    { value: 'Canada' },
    { value: 'Brazil' },
    { value: 'Philippines' },
    { value: 'A galaxy far far away, like really far away...' },
  ]

  const filteredPeople = people.filter((person) => {
    const matchesName = person.name.toLowerCase().includes(name.toLowerCase())

    const matchesTerritory = territory === '' ? true : person.territory === territory

    const matchesProducts = Object.values(products).every((product) => !product) ? true : person.products.some(product => products[product])

    return matchesName && matchesTerritory && matchesProducts
  })

  return (
    <>
      <Flex>
        <Filter
            isCollapsed={isCollapsed}
            marginRight="xs"
            onCollapse={() => setIsCollapsed(!isCollapsed)}
            results={filteredPeople.length}
            sortOptions={{
              popularity: 'Popularity',
              // eslint-disable-next-line
              manager_title: 'Manager\'s Title',
              // eslint-disable-next-line
              manager_name: 'Manager\'s Name',
            }}
            sortValue={[{ name: 'popularity', dir: 'desc' }]}
            variant="sidebar"
            width="xs"
        >
          <Filter.Section
              collapsed={isCollapsed}
              headerText="Full Name"
          >
            <TextInput
                onChange={handleUpdateName}
                placeholder="Enter name"
                value={name}
            />
          </Filter.Section>
          <SectionSeparator />
          <Filter.Section
              collapsed={isCollapsed}
              collapsible
              headerText="Territory"
          >
            <Select
                blankSelection="Select One..."
                name="location"
                onChange={handleUpdateTerritory}
                options={options}
            />
          </Filter.Section>
          <SectionSeparator />
          <Filter.Section
              collapsed={isCollapsed}
              collapsible
              headerText="Products"
          >
            <div>
              <Checkbox
                  marginBottom="sm"
                  name="Doors"
                  onChange={handleCheckboxChange}
                  text="Doors"
              />
            </div>
            <div>
              <Checkbox
                  marginBottom="sm"
                  name="Windows"
                  onChange={handleCheckboxChange}
                  text="Windows"
              />
            </div>
            <div>
              <Checkbox
                  marginBottom="sm"
                  name="Siding"
                  onChange={handleCheckboxChange}
                  text="Siding"
              />
            </div>
            {!isProductsCollapsed &&
              <>
                <div>
                  <Checkbox
                      checked={products["Roofing"]}
                      marginBottom="sm"
                      name="Roofing"
                      onChange={handleCheckboxChange}
                      text="Roofing"
                  />
                </div>
                <div>
                  <Checkbox
                      checked={products["Gutters"]}
                      marginBottom="sm"
                      name="Gutters"
                      onChange={handleCheckboxChange}
                      text="Gutters"
                  />
                </div>
                <div>
                  <Checkbox
                      checked={products["Solar"]}
                      marginBottom="sm"
                      name="Solar"
                      onChange={handleCheckboxChange}
                      text="Solar"
                  />
                </div>
                <div>
                  <Checkbox
                      checked={products["Insulation"]}
                      marginBottom="sm"
                      name="Insulation"
                      onChange={handleCheckboxChange}
                      text="Insulation"
                  />
                </div>
              </>
            }
            <div onClick={() => setIsProductsCollapsed(!isProductsCollapsed)}>
              <Flex
                  cursor="pointer"
                  marginBottom="sm"
              >
                <Caption
                    color="link"
                    marginRight="xxs"
                    size="xs"
                    text={isProductsCollapsed ? "Show More" : "Show Less"}
                />
                <Icon
                    icon={isProductsCollapsed ? "chevron-down" : "chevron-up"}
                />
              </Flex>
            </div>
          </Filter.Section>
        </Filter>
        <Table
            size="sm"
        >
          <thead>
            <tr>
              <th>{'Name'}</th>
              <th>{'Territory'}</th>
              <th>{'Products'}</th>
            </tr>
          </thead>
          <tbody>
            {filteredPeople.map((person) => (<tr key={person.name}>
              <td>{ person.name }</td>
              <td>{ person.territory }</td>
              <td>{ person.products.join(", ") }</td>
            </tr>))}
          </tbody>
        </Table>
      </Flex>
    </>
  )
}

export default FilterSidebar

Distribution Bar

Default

import React from 'react'

import { DistributionBar } from 'playbook-ui'

const DistributionBarDefault = (props) => {
  return (
    <React.Fragment>
      <div>
        <DistributionBar
            widths={[1, 2, 3, 4, 5, 3, 3, 7]}
        />
      </div>
      <br />
      <br />
      <div>
        <DistributionBar
            size="sm"
            widths={[1, 2, 3, 4, 5, 3, 3, 7]}
        />
      </div>
    </React.Fragment>
  )
}

export default DistributionBarDefault

Custom Colors

You can customize the order of the colors you would like to use by using the colors prop. Only the data and status colors will work for Playbook charts. See the design page for reference.

import React from 'react'

import { DistributionBar } from 'playbook-ui'

const DistributionBarCustomColors = (props) => {
  return (
    <React.Fragment>
      <div>
        <DistributionBar
            colors={['data_7', 'data_1', 'neutral']}
            widths={[4, 5, 3]}
        />
      </div>
    </React.Fragment>
  )
}

export default DistributionBarCustomColors

Legend

Default

import React from 'react'

import { Legend } from 'playbook-ui'

const products = ['Windows', 'Doors', 'Roofing', 'Siding', 'Solar', 'Gutters', 'Insulation', 'Other']

const LegendDefault = (props) => (
  <div>
    {
      products.map((product, i) => (
        <Legend
            color={`data_${i + 1}`}
            key={`legend_${i + 1}`}
            text={product}
        />
      ))
    }
  </div>
)

export default LegendDefault

With Prefix Text

import React from 'react'

import { Legend } from 'playbook-ui'

const LegendPrefix = (props) => (
  <div>
    <Legend
        color="data_3"
        prefixText="10"
        text="Windows"
    />
  </div>
)

export default LegendPrefix

Colors

By default legend kit uses data_1 color.
Pass the color prop and use any desired value from $data_colors, $status_colors, $product_colors and $category_colors list.

import React from 'react'

import { Legend } from 'playbook-ui'

const LegendColors = (props) => (
  <div>
    <Legend
        color="data_8"
        text="Data 8"
    />
    <Legend
        color="warning"
        text="Warning"
    />
    <Legend
        color="product_6_highlight"
        text="Product 6 (highlight)"
    />
    <Legend
        color="category_7"
        text="Category 7"
    />
  </div>
)

export default LegendColors

Custom Colors

The color prop also allows for use of custom colors passed in as HEX codes.

import React from 'react'

import { Legend } from 'playbook-ui'

const LegendCustomColors = (props) => (
  <div>
    <Legend
        color="#dc418a"
        text="Custom Legend Color 1"
    />
    <Legend
        color="#3ef0b8"
        text="Custom Legend Color 2"
    />
    <Legend
        color="#ab8b04"
        text="Custom Legend Color 3"
    />
  </div>
)

export default LegendCustomColors

Gauge

Default

import React from 'react'

import { gaugeTheme } from 'playbook-ui'
import Highcharts from "highcharts"
import HighchartsReact from "highcharts-react-official"
import HighchartsMore from "highcharts/highcharts-more"
import SolidGauge from "highcharts/modules/solid-gauge"

HighchartsMore(Highcharts);
SolidGauge(Highcharts);

const data = [{ name: "Name", y: 45 }]

const baseOptions = {
  series: [{ data: data }],
};

const GaugeDefault = () => {
  const options = Highcharts.merge({}, gaugeTheme, baseOptions);

  return (
    <div>
      <HighchartsReact
          highcharts={Highcharts}
          options={options}
      />
    </div>
  );
};

export default GaugeDefault;

Disable Animation

import React from 'react'

import { gaugeTheme } from 'playbook-ui'
import Highcharts from "highcharts"
import HighchartsReact from "highcharts-react-official"
import HighchartsMore from "highcharts/highcharts-more"
import SolidGauge from "highcharts/modules/solid-gauge"

HighchartsMore(Highcharts);
SolidGauge(Highcharts);

const data = [{ name: "Participants", y: 84 }]

const baseOptions = {
  series: [{ data: data }],
  plotOptions: {
    series: {
      animation: false,
    },
  },
};

const GaugeDisableAnimation = () => {
  const options = Highcharts.merge({}, gaugeTheme, baseOptions);

  return (
    <div>
      <HighchartsReact
          disableAnimation
          highcharts={Highcharts}
          options={options}
      />
    </div>
  );
};

export default GaugeDisableAnimation;

Title

import React from 'react'

import { gaugeTheme } from 'playbook-ui'
import Highcharts from "highcharts"
import HighchartsReact from "highcharts-react-official"
import HighchartsMore from "highcharts/highcharts-more"
import SolidGauge from "highcharts/modules/solid-gauge"

HighchartsMore(Highcharts);
SolidGauge(Highcharts);

const data = [{ name: "Score", y: 780 }]

const baseOptions = {
  title: {
    text: "Credit Score",
  },
  yAxis: {
    min: 300,
    max: 850,
  },
  series: [{ data: data }],
};

const GaugeTitle = () => {
  const options = Highcharts.merge({}, gaugeTheme, baseOptions);

  return (
    <div>
      <HighchartsReact
          highcharts={Highcharts}
          id="gauge-title"
          options={options}
      />
    </div>
  );
};

export default GaugeTitle;

Units

Use custom CSS with classes or inline styles (as shown in these docs) to customize the appearance of prefix and suffix units.

import React from 'react'

import { gaugeTheme, colors, typography } from 'playbook-ui'
import Highcharts from "highcharts"
import HighchartsReact from "highcharts-react-official"
import HighchartsMore from "highcharts/highcharts-more"
import SolidGauge from "highcharts/modules/solid-gauge"

HighchartsMore(Highcharts);
SolidGauge(Highcharts);

const data1 = [
  { name: 'Data Used', y: 32 },
]
const data2 = [
  { name: 'Sales to Date', y: 65 },
]

const baseOptions1 = {
  title: {
    text: "Data Usage",
  },
  series: [{ data: data1 }],
  plotOptions: {
    solidgauge: {
      dataLabels: {
        format:
          `<span class="fix">{y:,f}</span>` +
          `<span style="fill: ${colors.text_lt_light}; font-size: ${typography.text_larger};">GB</span>`,
      },
    },
  },
};
const baseOptions2 = {
  title: {
    text: "Sales Goal",
  },
  series: [{ data: data2 }],
  plotOptions: {
    solidgauge: {
      dataLabels: {
        format:
          `<span y="28" style="fill: ${colors.text_lt_light}; font-size: ${typography.text_base};">$</span>` +
          `<span class="fix" y="38">{y:,f}</span>` +
          `<span style="fill: ${colors.text_lt_light}; font-size: ${typography.text_larger};">k</span>`,
      },
    },
  },
};

const GaugeUnits = () => {
  const options1 = Highcharts.merge({}, gaugeTheme, baseOptions1);
  const options2 = Highcharts.merge({}, gaugeTheme, baseOptions2);

  return (
    <div>
      <HighchartsReact
          highcharts={Highcharts}
          id="gauge-units1"
          options={options1}
      />
      <HighchartsReact
          highcharts={Highcharts}
          id="gauge-units2"
          options={options2}
      />
    </div>
  );
};

export default GaugeUnits;

Full Circle

import React from 'react'

import { gaugeTheme, colors, typography } from 'playbook-ui'
import Highcharts from "highcharts"
import HighchartsReact from "highcharts-react-official"
import HighchartsMore from "highcharts/highcharts-more"
import SolidGauge from "highcharts/modules/solid-gauge"

HighchartsMore(Highcharts);
SolidGauge(Highcharts);

const data = [{ name: "Capacity", y: 75 }]

const baseOptions = {
  title: {
    text: "Seating Capacity",
  },
  series: [{ data: data }],
  pane: {
    startAngle: 0,
    endAngle: 360,
  },
  plotOptions: {
    solidgauge: {
      dataLabels: {
        format:
          `<span class="fix">{y:,f}</span>` +
          `<span style="fill: ${colors.text_lt_light}; font-size: ${typography.text_larger};">%</span>`,
      },
    },
  },
};

const GaugeFullCircle = () => {
  const options = Highcharts.merge({}, gaugeTheme, baseOptions);

  return (
    <div>
      <HighchartsReact
          highcharts={Highcharts}
          id="gauge-full-circle"
          options={options}
      />
    </div>
  );
};

export default GaugeFullCircle;

Min Max Labels

Min defaults to 0, Max to 100.

import React from 'react'

import { gaugeTheme, colors, typography } from 'playbook-ui'
import Highcharts from "highcharts"
import HighchartsReact from "highcharts-react-official"
import HighchartsMore from "highcharts/highcharts-more"
import SolidGauge from "highcharts/modules/solid-gauge"

HighchartsMore(Highcharts);
SolidGauge(Highcharts);

const data = [{ name: "Rating", y: 4.5 }]

const baseOptions = {
  title: {
    text: "Product Rating",
  },
  yAxis: {
    min: 0,
    max: 5,
    lineWidth: 0,
    tickWidth: 0,
    minorTickInterval: null,
    tickAmount: 2,
    tickPositions: [0, 5],
    labels: {
      y: 26,
      enabled: true,
      style: {
        color: colors.neutral,
        fontFamily: typography.font_family_base,
        fontWeight: typography.bold,
      }
    },
  },
  series: [{ data: data }],
};

const GaugeMinMax = () => {
  const options = Highcharts.merge({}, gaugeTheme, baseOptions);

  return (
    <div>
      <HighchartsReact
          highcharts={Highcharts}
          id="gauge-min-max"
          options={options}
      />
    </div>
  );
};

export default GaugeMinMax;

Sizing

Gauge resizes dynamically to fit whatever element it's placed within.

Note: set `overflow` to hidden on the parent element when nesting gauges inside of a flex items to best respond to shrinking screens.

import React from 'react'

import { Flex, FlexItem, gaugeTheme } from 'playbook-ui'

import Highcharts from "highcharts"
import HighchartsReact from "highcharts-react-official"
import HighchartsMore from "highcharts/highcharts-more"
import SolidGauge from "highcharts/modules/solid-gauge"

HighchartsMore(Highcharts);
SolidGauge(Highcharts);

const GaugeSizing = (props) => (
  <div>
    <Flex
        align="center"
        wrap
    >
      <FlexItem
          fixedSize="400px"
          overflow="hidden"
          shrink
      >
        <HighchartsReact
            highcharts={Highcharts}
            options={Highcharts.merge({}, gaugeTheme, {
              series: [{ data: [{ name: "Point 1", y: 100 }] }],
            })}
        />
      </FlexItem>
      <FlexItem
          fixedSize="300px"
          overflow="hidden"
          shrink
      >
        <HighchartsReact
            highcharts={Highcharts}
            options={Highcharts.merge({}, gaugeTheme, {
              series: [{ data: [{ name: "Point 2", y: 75 }] }],
            })}
        />
      </FlexItem>
      <FlexItem
          fixedSize="200px"
          overflow="hidden"
          shrink
      >
        <HighchartsReact
            highcharts={Highcharts}
            options={Highcharts.merge({}, gaugeTheme, {
              series: [{ data: [{ name: "Point 3", y: 50 }] }],
            })}
        />
      </FlexItem>
      <FlexItem
          fixedSize="125px"
          overflow="hidden"
          shrink
      >
        <HighchartsReact
            highcharts={Highcharts}
            options={Highcharts.merge({}, gaugeTheme, {
              chart: {
                height: "100%",
              },
              series: [{ data: [{ name: "Point 4", y: 25 }] }],
            })}
        />
      </FlexItem>
    </Flex>
  </div>
)

export default GaugeSizing

Height

import React from 'react'

import { gaugeTheme, colors, typography } from 'playbook-ui'
import Highcharts from "highcharts"
import HighchartsReact from "highcharts-react-official"
import HighchartsMore from "highcharts/highcharts-more"
import SolidGauge from "highcharts/modules/solid-gauge"

HighchartsMore(Highcharts);
SolidGauge(Highcharts);

const GaugeHeight = () => {
  return (
    <div>
      <HighchartsReact
          highcharts={Highcharts}
          options={Highcharts.merge({}, gaugeTheme, {
            title: {
              text: "Fixed Height in Pixels",
            },
            chart: {
              height: "400",
            },
            series: [{ data: [{ name: "Pixels", y: 400 }] }],
            plotOptions: {
              solidgauge: {
                dataLabels: {
                  format:
                    `<span class="fix">{y:,f}</span>` +
                    `<span style="fill: ${colors.text_lt_light}; font-size: ${typography.text_larger};">px</span>`,
                },
              },
            },
          })}
      />
      <HighchartsReact
          highcharts={Highcharts}
          options={Highcharts.merge({}, gaugeTheme, {
            title: {
              text: "Height as Percentage of Width",
            },
            chart: {
              height: "45%",
            },
            series: [{ data: [{ name: "Percentage", y: 45 }] }],
            plotOptions: {
              solidgauge: {
                dataLabels: {
                  format:
                    `<span class="fix">{y:,f}</span>` +
                    `<span style="fill: ${colors.text_lt_light}; font-size: ${typography.text_larger};">%</span>`,
                },
              },
            },
          })}
      />
    </div>
  );
};

export default GaugeHeight;

Live Data

import React, { useState, useRef } from 'react'

import { Button, gaugeTheme } from 'playbook-ui'

import Highcharts from "highcharts"
import HighchartsReact from "highcharts-react-official"
import HighchartsMore from "highcharts/highcharts-more"
import SolidGauge from "highcharts/modules/solid-gauge"

HighchartsMore(Highcharts);
SolidGauge(Highcharts);

const GaugeLiveData = (props) => {
  const [value, setValue] = useState(50)
  const [name, setName] = useState('Name')
  const chartRef = useRef(null)

  const namesArray = ['Name', 'Windows', 'Doors', 'Roofing', 'Siding', 'Gutters']

  const updateValue = () => {
    const newValue = Math.floor(Math.random() * 100)
    setValue(newValue)

    const chart = chartRef.current?.chart
    if (chart) {
      chart.series[0].points[0].update(newValue)
    }
  }

  const updateName = () => {
    let index = namesArray.indexOf(name)
    if (namesArray.indexOf(name) == 5) {
      index = 0
    } else {
      index += 1
    }
    setName(namesArray[index])

    const chart = chartRef.current?.chart
    if (chart) {
      chart.series[0].points[0].update({ name: namesArray[index] })
    }
  }

  const options = Highcharts.merge({}, gaugeTheme,
    {
      title: {
        text: name,
      },
      series: [{
        data: [{ name: name, y: value }]
      }]
    }
  )

  return (
    <div>
      <Button
          onClick={updateValue}
          text="Update Value"
      />
      <Button
          onClick={updateName}
          text="Update Name"
      />
      <HighchartsReact
          highcharts={Highcharts}
          options={options}
          ref={chartRef}
      />
    </div>
  )
}

export default GaugeLiveData

Color Overrides

import React from 'react'

import { gaugeTheme, colors } from 'playbook-ui'
import Highcharts from "highcharts"
import HighchartsReact from "highcharts-react-official"
import HighchartsMore from "highcharts/highcharts-more"
import SolidGauge from "highcharts/modules/solid-gauge"

HighchartsMore(Highcharts);
SolidGauge(Highcharts);

const data = [{ name: "Name", y: 67 }]

const baseOptions = {
  series: [{ data: data }],
  plotOptions: {
    solidgauge: {
      borderColor: colors.data_7,
    }
  },
};

const GaugeColors = () => {
  const options = Highcharts.merge({}, gaugeTheme, baseOptions);

  return (
    <div>
      <HighchartsReact
          highcharts={Highcharts}
          options={options}
      />
    </div>
  );
};

export default GaugeColors;

Complex

We are able to wrap the Highcharts Gauge kit within Playbook kits (such as Flex and Card components).

import React from "react";

import { Flex, FlexItem, Card, Caption, Body, SectionSeparator, Title, gaugeTheme, colors, typography } from 'playbook-ui'

import Highcharts from "highcharts"
import HighchartsReact from "highcharts-react-official"
import HighchartsMore from "highcharts/highcharts-more"
import SolidGauge from "highcharts/modules/solid-gauge"

HighchartsMore(Highcharts);
SolidGauge(Highcharts);

const data = [{ name: "Name", y: 10 }];

const baseOptions = {
  series: [{ data: data }],
  chart: {
    height: "150",
  },
  plotOptions: {
    series: {
      animation: false,
    },
    solidgauge: {
      dataLabels: {
        format:
          `<span class="fix">{y:,f}</span>` +
          `<span style="fill: ${colors.text_lt_light}; font-size: ${typography.text_larger};">%</span>`,
      },
    },
  },
};

const options = Highcharts.merge({}, gaugeTheme, baseOptions);

const GaugeComplex = (props) => (
  <Flex
      gap="sm"
      padding="xl"
      wrap
  >
    <FlexItem
        flex={1}
        grow
    >
      <Card
          maxWidth="xs"
          padding="md"
      >
        <Title
            paddingBottom="sm"
            size={4}
            text="Abandoned Calls"
        />
        <Flex
            align="stretch"
        >
          <Flex
              marginRight="sm"
              orientation="column"
          >
            <Body
                color="light"
                paddingBottom="sm"
                text="Total Abandoned"
            />
            <Flex
                align="baseline"
                paddingBottom="xs"
            >
              <Title
                  size={1}
                  text="39"
              />
              <Title
                  color="light"
                  size={3}
                  text="calls"
              />
            </Flex>
            <Caption
                size="xs"
                text="of 390"
            />
          </Flex>

          <SectionSeparator
              alignSelf="stretch"
              marginRight="sm"
              orientation="vertical"
          />

          <Flex
              orientation="column"
              wrap
          >
              <Body
                  color="light"
                  text="% Abandoned"
              />
            <Flex
                wrap
            >
              <FlexItem
                  fixedSize="150px"
                  overflow="hidden"
                  shrink
              >
                <HighchartsReact
                    highcharts={Highcharts}
                    options={options}
                />
               </FlexItem>
            </Flex>
          </Flex>
        </Flex>
      </Card>
    </FlexItem>
  </Flex>
);

export default GaugeComplex;

Bar Graph

Default

import React from 'react'

import { barGraphTheme } from 'playbook-ui'
import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";

const chartData = [{
  name: 'Installation',
  data: [1475, 200, 3000, 654, 656],
}, {
  name: 'Manufacturing',
  data: [4434, 524, 2320, 440, 500],
}, {
  name: 'Sales & Distribution',
  data: [3387, 743, 1344, 434, 440],
}, {
  name: 'Project Development',
  data: [3227, 878, 999, 780, 1000],
}, {
  name: 'Other',
  data: [1111, 677, 3245, 500, 200],
}]

const chartOptions = {
  series: chartData,
  title: {
    text: 'Solar Employment Growth by Sector, 2010-2016',
  },
  subtitle: {
    text: 'Source: thesolarfoundation.com',
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
  },
  yAxis: {
    title: {
      text: 'Number of Employees',
    },
  },
}

const BarGraphDefault = () => {
  const options = Highcharts.merge({}, barGraphTheme, chartOptions)

  return (
    <div>
      <HighchartsReact
          highcharts={Highcharts}
          options={options}
      />
    </div>
  )
}

export default BarGraphDefault

Legend

import React from 'react'

import { barGraphTheme } from 'playbook-ui'
import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";

const chartData = [{
  name: 'Number of Installations',
  data: [1475, 200, 3000, 654, 656],
}]

const chartOptions = {
  series: chartData,
  title: {
    text: 'Bar Graph with Legend',
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
  },
  yAxis: {
    title: {
      text: 'Number of Employees',
    },
  },
  legend: { enabled: true },
}

const BarGraphLegend = () => {
  const options = Highcharts.merge({}, barGraphTheme, chartOptions)
  
  return (
    <div>
      <HighchartsReact
          highcharts={Highcharts}
          options={options}
      />
    </div>
  )
}
export default BarGraphLegend

Legend Position

Prop

layout determines the position of the legend items
layout: proximate will place the legend items as close as possible to the graphs they're representing. It will also determine whether to place the legend above/below or on the side of the plot area, if the legend is in a corner.
x offsets the legend relative to its horizontal alignmnet. Negative x moves it to the left, positive x moves it to the right
y offsets the legend relative to its vertical alignmnet. Negative y moves it up, positive y moves it down.

import React from 'react'

import { barGraphTheme, Title } from 'playbook-ui'
import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";

const chartData = [{
  name: 'Installation',
  data: [1475],
}, {
  name: 'Manufacturing',
  data: [4434],
}, {
  name: 'Sales & Distribution',
  data: [3387],
}, {
  name: 'Project Development',
  data: [3227],
}, {
  name: 'Other',
  data: [1111],
}]

const alignChartOptions = {
  series: chartData,
  title: {
    text: 'Alignment of Legend',
  },
  subtitle: {
    text: 'Source: thesolarfoundation.com',
  },
  xAxis: {
    categories: ['Jan'],
  },
  yAxis: {
    title: {
      text: 'Number of Employees',
    },
  },
  legend: { 
    enabled: true,
    verticalAlign: 'top',
    align: 'right',
   },
}

const layoutChartOptions = {
  series: chartData,
  title: {
    text: 'Layout of Legend',
  },
  xAxis: {
    categories: ['Jan'],
  },
  yAxis: {
    title: {
      text: 'Number of Employees',
    },
  },
  legend: { 
    enabled: true,
    layout: 'vertical',
   },
}

const offsetChartOptions = {
  series: chartData,
  title: {
    text: 'Offset of Legend',
  },
  xAxis: {
    categories: ['Jan'],
  },
  yAxis: {
    title: {
      text: 'Number of Employees',
    },
  },
  legend: {
    enabled: true,
    layout: 'vertical',
    x: 100,
    y: 10,
  },
}

const BarGraphLegendPosition = () => {
  const alignOptions = Highcharts.merge({}, barGraphTheme, alignChartOptions)
  const layoutOptions = Highcharts.merge({}, barGraphTheme, layoutChartOptions)
  const offsetOptions = Highcharts.merge({}, barGraphTheme, offsetChartOptions)

  return (
  <div>
    <Title
        paddingBottom="sm"
        paddingTop="sm"
        size={4}
        tag="h4"
        text="align | verticalAlign"
    />
    <HighchartsReact 
        highcharts={Highcharts}
        options={alignOptions}
    />

    <Title
        paddingBottom="sm"
        paddingTop="sm"
        size={4}
        tag="h4"
        text="layout"
    />
    <HighchartsReact 
        highcharts={Highcharts}
        options={layoutOptions}
    />

    <Title
        paddingBottom="sm"
        paddingTop="sm"
        size={4}
        tag="h4"
        text="x | y"
    />
    <HighchartsReact 
        highcharts={Highcharts}
        options={offsetOptions}
    />
  </div>
)
}

export default BarGraphLegendPosition

Legend Non Clickable

import React from 'react'

import { barGraphTheme } from 'playbook-ui'
import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";

const chartData = [{
  name: 'Number of Installations',
  data: [1475, 200, 3000, 654, 656],
}]

const chartOptions = {
    title: {
      text: 'Bar Graph with Legend Non Clickable',
    },
    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
    },
    yAxis: {
      title: {
        text: 'Number of Employees',
      },
    },
    legend: {
      enabled: true,
      events: {
        itemClick: function () {
          return false;
        }
      }
    },
  series: chartData
}

const BarGraphLegendNonClickable = () => {
  const options = Highcharts.merge({}, barGraphTheme, chartOptions)

  return (
    <div>
      <HighchartsReact
          highcharts={Highcharts}
          options={options}
      />
    </div>
  )
}

export default BarGraphLegendNonClickable

Height

By default, Highcharts have a height of 400px, but this can be customized. You can override the default by specifying either a percentage or a fixed pixel value.

Using a percentage maintains a consistent aspect ratio across different responsive sizes. For example, setting the height to 50% makes the chart’s height half of its width.

import React from 'react'

import { barGraphTheme } from 'playbook-ui'
import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";

const chartData = [{
  name: 'Number of Installations',
  data: [1475, 200, 3000, 654, 656],
}]

const pixelHeightChartOptions = {
  chart: {
    height: "300"
  },
  series: chartData,
  title: {
    text: "Fixed Height (300px)",
  },
  xAxis: {
    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
  },
  yAxis: {
    title: {
      text: "Number of Employees",
    },
  },
};

const percentageHeightChartOptions = {
  chart: {
    height: "50%"
  },
  series: chartData,
  title: {
    text: "Percentage Height (50%)",
  },
  xAxis: {
    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
  },
  yAxis: {
    title: {
      text: "Number of Employees",
    },
  },
};

const pixelOptions = Highcharts.merge({}, barGraphTheme, pixelHeightChartOptions)

const percentageOptions = Highcharts.merge({}, barGraphTheme, percentageHeightChartOptions)

const BarGraphHeight = () => (
  <div>
      <HighchartsReact
          highcharts={Highcharts}
          options={pixelOptions}
      />

    <br />
    <br />

    <HighchartsReact
        highcharts={Highcharts}
        options={percentageOptions}
    />
  </div>
)

export default BarGraphHeight

Spline

A spline can be added by including a separate chart data with the type: 'spline' attribute.
A color can also be specified for the spline.

import React from 'react'

import { barGraphTheme } from 'playbook-ui'
import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";

const chartData = [{
  name: 'Number of Installations',
  data: [1475, 200, 3000, 654, 656],
}, {
  type: 'spline',
  name: 'Trend Line',
  data: [1975, 600, 2500, 924, 500],
  color: '#F9BB00',
}]

const chartOptions = {
  series: chartData,
  title: {
    text: "Bar Graph with Spline",
  },
  xAxis: {
    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
  },
  yAxis: {
    title: {
      text: "Number of Employees",
    },
  },
  legend: { enabled: true },
};

const BarGraphSpline = () => {
  const options = Highcharts.merge({}, barGraphTheme, chartOptions)

  return (
    <div>
      <HighchartsReact
          highcharts={Highcharts}
          options={options}
      />
    </div>
  )
}

export default BarGraphSpline

Color Overrides

import React from 'react'

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

import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";

const chartData = [{
  name: 'Installation',
  data: [1475, 200, 3000, 654, 656],
}, {
  name: 'Manufacturing',
  data: [4434, 524, 2320, 440, 500],
}, {
  name: 'Sales & Distribution',
  data: [3387, 743, 1344, 434, 440],
}, {
  name: 'Project Development',
  data: [3227, 878, 999, 780, 1000],
}, {
  name: 'Other',
  data: [1111, 677, 3245, 500, 200],
}]

const chartOptions = {
  series: chartData,
  title: {
    text: "Bar Graph with Custom Data Colors",
  },
  xAxis: {
    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
  },
  yAxis: {
    title: {
      text: "Number of Employees",
    },
  },
  colors: [colors.data_4, colors.data_5, colors.data_6, colors.data_7, colors.data_8],
}

const BarGraphColors = () => {
  const options = Highcharts.merge({}, barGraphTheme, chartOptions)

  return (
    <div>
      <HighchartsReact
          highcharts={Highcharts}
          options={options}
      />
    </div>
  )
}

export default BarGraphColors

Stacked

The stacking prop can be used for a stacked bar graph. The prop allows for normal or percent as options.

import React from 'react'

import { barGraphTheme } from 'playbook-ui'
import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";

const chartData = [{
  name: 'Installation',
  data: [1475, 200, 3000, 654, 656],
}, 
{
  name: 'Manufacturing',
  data: [1270, 800, 200, 454, 956],
}, {
  name: 'Sales & Distribution',
  data: [975, 1600, 1500, 924, 500],
}]

const chartOptions = {
  series: chartData,
  title: {
    text: "Bar Graph with Stacked Columns",
  },
  xAxis: {
    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
  },
  yAxis: {
    title: {
      text: "Number of Employees",
    },
  },
  plotOptions: {
    column: {
        stacking: 'normal',
        borderWidth: 0,
    }
  },
  legend: { enabled: true },
};

const BarGraphStacked = () => {
  const options = Highcharts.merge({}, barGraphTheme, chartOptions)

  return (
    <div>
      <HighchartsReact
          highcharts={Highcharts}
          options={options}
      />
    </div>
  )
}

export default BarGraphStacked

Negative Numbers

import React from 'react'

import { barGraphTheme } from 'playbook-ui'
import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";

const chartData = [{
  name: 'Installation',
  data: [-475, 400, -1000, 354, -856],
  threshold: 0
}, {
  name: 'Manufacturing',
  data: [1475, 200, 1000, 654, -656],
  threshold: 0
},
{
  name: 'Sales & Distribution',
  data: [1270, 100, -1200, 554, 756],
  threshold: 0
}]

const chartOptions = {
  series: chartData,
  title: {
    text: "Bar Graph with Negative Numbers",
  },
  xAxis: {
    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
  },
  yAxis: {
    title: {
      text: "Number of Employees",
    },
  },
  legend: { enabled: true },
};

const BarGraphStacked = () => {
  const options = Highcharts.merge({}, barGraphTheme, chartOptions)

  return(
    <div>
      <HighchartsReact
          highcharts={Highcharts}
          options={options}
      />
    </div>
  )
}

export default BarGraphStacked

Secondary Y-Axis

Optionally add a second yAxis to support secondary datasets (e.x., a spline) by passing yAxis: 1 to the second node of your chartData array.

To customize the format and/or title of your secondary yAxis, pass your desired values as arrays through the axisFormat and axisTitle props, respectively.

import React from 'react'

import { barGraphTheme, colors, typography } from 'playbook-ui'
import Highcharts from "highcharts"
import HighchartsReact from "highcharts-react-official"

const chartData = [{
  name: 'Number of Installations',
  data: [1475, 200, 3000, 654, 656],
}, {
  type: 'spline',
  name: 'Percentage',
  data: [48, 70, 25, 55, 72],
  color: '#F9BB00',
  yAxis: 1
}]

const chartOptions = {
  series: chartData,
  title: {
    text: "Bar Graph with Secondary Y-axis",
  },
  xAxis: {
    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
  },
  yAxis: [{
    labels: {
      style: {
        fontFamily: typography.font_family_base,
        color: colors.text_lt_lighter,
        fontWeight: typography.bold,
        fontSize: typography.text_smaller,
      },
    },
    title: {
      text: "Number of Employees",
      style: {
        fontFamily: typography.font_family_base,
        color: colors.text_lt_lighter,
        fontWeight: typography.bold,
        fontSize: typography.text_smaller,
      },
    },
  }, {
    labels: {
      style: {
        fontFamily: typography.font_family_base,
        color: colors.text_lt_lighter,
        fontWeight: typography.bold,
        fontSize: typography.text_smaller,
      },
    },
    title: {
      text: "Percentage",
      style: {
        fontFamily: typography.font_family_base,
        color: colors.text_lt_lighter,
        fontWeight: typography.bold,
        fontSize: typography.text_smaller,
      },
    },

    opposite: true,
    min: 0,
    max: 100
  }],
  legend: { enabled: true },
}

const BarGraphSecondaryYAxis = () => {
  const options = Highcharts.merge({}, barGraphTheme, chartOptions)

  return (
    <div>
      <HighchartsReact
          highcharts={Highcharts}
          options={options}
      />
    </div>
  )
}

export default BarGraphSecondaryYAxis

Horizontal Bar Graph

import React from 'react'

import { barGraphTheme } from 'playbook-ui'
import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";

const chartOptions = {
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Historic World Population by Region',
        align: 'left'
    },
    subtitle: {
        text: 'Source: <a ' +
            'href="https://en.wikipedia.org/wiki/List_of_continents_and_continental_subregions_by_population"' +
            'target="_blank">Wikipedia.org</a>',
        align: 'left'
    },
    xAxis: {
        categories: ['Africa', 'America', 'Asia', 'Europe'],
        lineWidth: 0
    },
    yAxis: {
        title: {
            text: '',
        },
    },
    tooltip: {
        valueSuffix: ' millions'
    },
    plotOptions: {
        bar: {
            dataLabels: {
                enabled: true
            },
            groupPadding: 0.1
        }
    },
    series: [{
        name: 'Year 1990',
        data: [631, 727, 3202, 721]
    }, {
        name: 'Year 2000',
        data: [814, 841, 3714, 726]
    }, {
        name: 'Year 2018',
        data: [1276, 1007, 4561, 746]
    }],
}

const options = Highcharts.merge({}, barGraphTheme, chartOptions)

const BarGraphHorizontal = () => (
  <div>
    <HighchartsReact
        highcharts={Highcharts}
        options={options}
    />
  </div>
)

export default BarGraphHorizontal

Circle Chart

Default Style

import React from 'react'

import { circleChartTheme } from 'playbook-ui'
import Highcharts from "highcharts"
import HighchartsReact from "highcharts-react-official"

const data = [
  {
    name: 'Waiting for Calls',
    y: 41,
  },
  {
    name: 'On Call',
    y: 49,
  },
  {
    name: 'After Call',
    y: 10,
  },
]

const chartOptions = {
  series: [{ data: data }],
}

const CircleChartDefault = () => {
  const options = Highcharts.merge({}, circleChartTheme, chartOptions)

  return (
    <div>
      <HighchartsReact
          highcharts={Highcharts}
          options={options}
      />
    </div>
  );
};

export default CircleChartDefault;

Live Data

import React, { useState } from 'react'

import { circleChartTheme, Button } from 'playbook-ui'
import Highcharts from "highcharts"
import HighchartsReact from "highcharts-react-official"

const CircleChartLiveData = (props) => {
  const [data, setData] = useState([
    {
      name: 'Waiting for Calls',
      y: 41,
    },
    {
      name: 'On Call',
      y: 49,
    },
    {
      name: 'After Call',
      y: 10,
    },
  ])

  const data2 = [
    {
      name: 'Waiting for Calls',
      y: 48,
    },
    {
      name: 'On Call',
      y: 12,
    },
    {
      name: 'After Call',
      y: 140,
    },
  ]

  const updateValue = () => {
    setData(data2)
  }

  const chartOptions = {
    series: [{ data: data }],
  }

  const options = Highcharts.merge({}, circleChartTheme, chartOptions)

  return (
    <div>
      <Button
          onClick={updateValue}
          text="Update Value"
      />
      <HighchartsReact
          highcharts={Highcharts}
          options={options}
      />
    </div>
  )
}

export default CircleChartLiveData

Rounded Corners

import React from 'react'

import { circleChartTheme } from 'playbook-ui'
import Highcharts from "highcharts"
import HighchartsReact from "highcharts-react-official"

const dataRounded = [
  {
    name: 'Waiting for Calls',
    y: 41,
  },
  {
    name: 'On Call',
    y: 49,
  },
  {
    name: 'After Call',
    y: 10,
  },
]

const CircleChartRounded = () => {
  const chartOptions = {
    series: [{ data: dataRounded }],
    plotOptions: {
      pie: {
        borderColor: null,
        borderWidth: 20,
        innerSize: '100%',
      },
    },
  }

  const options = Highcharts.merge({}, circleChartTheme, chartOptions)

  return (
    <div>
      <HighchartsReact
          highcharts={Highcharts}
          options={options}
      />
    </div>
  )
}

export default CircleChartRounded

Accepts Any Block

import React from 'react'

import { circleChartTheme, Title } from 'playbook-ui'
import Highcharts from "highcharts"
import HighchartsReact from "highcharts-react-official"

const dataWithABlock = [
  {
    name: 'Waiting for Calls',
    y: 41,
  },
  {
    name: 'On Call',
    y: 49,
  },
  {
    name: 'After Call',
    y: 10,
  },
]

const CircleChartBlock = (props) => {
  const chartOptions = {
    series: [{
      data: dataWithABlock,
      innerSize: '100%',
      borderWidth: 20,
      borderColor: null,
    }],
    chart: {
      events: {
        render: function() {
          const chart = this;
          const blockElement = document.querySelector('.pb-circle-chart-block');
          if (blockElement) {
            blockElement.style.width = chart.chartWidth + 'px';
            blockElement.style.height = chart.chartHeight + 'px';
          }
        },
        redraw: function() {
          const chart = this;
          const blockElement = document.querySelector('.pb-circle-chart-block');
          if (blockElement) {
            blockElement.style.width = chart.chartWidth + 'px';
            blockElement.style.height = chart.chartHeight + 'px';
          }
        }
      }
    }
  }

  const options = Highcharts.merge({}, circleChartTheme, chartOptions)

  return (
    <div>
      <div style={{ position: 'relative' }}>
        <HighchartsReact
            highcharts={Highcharts}
            options={options}
        />
        <div 
            className="pb-circle-chart-block"
            style={{
              position: 'absolute',
              top: 0,
              left: 0,
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
              zIndex: 1,
              textAlign: 'center',
              pointerEvents: 'none'
          }}
        >
          <Title
              size={1}
              tag="div"
          >
            {'83'}
          </Title>
        </div>
      </div>
    </div>
  )
}

export default CircleChartBlock

Color Overrides

Custom data colors allow for color customization to match the needs of business requirements.
Import the colors from Playbook's tokens, then set custom colors in the plotOptions.pie.colors array using the desired color variables. Hex colors are also available eg: #CA0095.

import React from 'react'

import { circleChartTheme, colors } from 'playbook-ui'
import Highcharts from "highcharts"
import HighchartsReact from "highcharts-react-official"

const dataWithColors = [
  {
    name: 'Waiting for Calls',
    y: 41,
  },
  {
    name: 'On Call',
    y: 49,
  },
  {
    name: 'After Call',
    y: 10,
  },
]

const CircleChartColors = () => {
  const chartOptions = {
    series: [{ data: dataWithColors }],
    plotOptions: {
      pie: {
        colors: ["#144075", colors.data_4, colors.data_2]
      }
    }
  }

  const options = Highcharts.merge({}, circleChartTheme, chartOptions)

  return (
    <div>
      <HighchartsReact
          highcharts={Highcharts}
          options={options}
      />
    </div>
  )
}

export default CircleChartColors

Data Labels

import React from 'react'

import { circleChartTheme } from 'playbook-ui'
import Highcharts from "highcharts"
import HighchartsReact from "highcharts-react-official"

const dataWithLabels = [
  {
    name: 'Facebook',
    y: 2498,
  },
  {
    name: 'YouTube',
    y: 2000,
  },
  {
    name: 'WhatsApp',
    y: 2000,
  },
  {
    name: 'Facebook Messenger',
    y: 1300,
  },
  {
    name: 'WeChat',
    y: 1165,
  },
  {
    name: 'Instagram',
    y: 1000,
  },
  {
    name: 'Tik Tok',
    y: 800,
  },
]

const CircleChartWithLabels = () => {
  const chartOptions = {
    series: [{ data: dataWithLabels }],
    plotOptions: {
      pie: {
        dataLabels: {
          enabled: true,
        }
      }
    }
  }

  const options = Highcharts.merge({}, circleChartTheme, chartOptions)

  return (
    <div>
      <HighchartsReact
          highcharts={Highcharts}
          options={options}
      />
    </div>
  )
}

export default CircleChartWithLabels

Legend

import React from 'react'

import { circleChartTheme } from 'playbook-ui'
import Highcharts from "highcharts"
import HighchartsReact from "highcharts-react-official"

const dataWithLegend = [{
  name: 'Bugs',
  y: 8,
},
{
  name: 'Chores',
  y: 1,
},
{
  name: 'Stories',
  y: 12,
}]

const CircleChartWithLegendKit = () => {
  const chartOptions = {
    series: [{ data: dataWithLegend }],
    plotOptions: {
      pie: {
        showInLegend: true
      }
    }
  }

  const options = Highcharts.merge({}, circleChartTheme, chartOptions)

  return (
    <div>
      <HighchartsReact
          highcharts={Highcharts}
          options={options}
      />
    </div>
  )
}

export default CircleChartWithLegendKit

Legend Position

Prop

layout determines the position of the legend items
layout: proximate will place the legend items as close as possible to the graphs they're representing. It will also determine whether to place the legend above/below or on the side of the plot area, if the legend is in a corner.

x offsets the legend relative to its horizontal alignment. Negative x moves it to the left, positive x moves it to the right

y offsets the legend relative to its vertical alignment. Negative y moves it up, positive y moves it down.

import React from 'react'

import { circleChartTheme, Title } from 'playbook-ui'
import Highcharts from "highcharts"
import HighchartsReact from "highcharts-react-official"

const dataFirst = [
  {
    name: 'Waiting for Calls',
    y: 41,
  },
  {
    name: 'On Call',
    y: 49,
  },
  {
    name: 'After Call',
    y: 10,
  },
]

const dataSecond = [{
  name: 'Bugs',
  y: 8,
},
{
  name: 'Chores',
  y: 1,
},
{
  name: 'Stories',
  y: 12,
}]

const dataThird = [
  {
    name: 'Queued',
    y: 7,
  },
  {
    name: 'In Progress',
    y: 6,
  },
  {
    name: 'Validation',
    y: 3,
  },
  {
    name: 'Done',
    y: 6,
  },
]

const CircleChartLegendPosition = (props) => {
  const chartOptionsFirst = {
    title: { text: "Alignment of Legend" },
    series: [{ data: dataFirst }],
    legend: {
      align: 'right',
      verticalAlign: 'top'
    },
    plotOptions: {
      pie: {
        showInLegend: true
      }
    }
  }

  const chartOptionsSecond = {
    title: { text: "Layout of Legend" },
    series: [{ data: dataSecond }],
    legend: {
      layout: 'vertical'
    },
    plotOptions: {
      pie: {
        showInLegend: true
      }
    }
  }

  const chartOptionsThird = {
    title: { text: "Offset of Legend" },
    series: [{ data: dataThird }],
    legend: {
      layout: 'vertical',
      x: 100,
      y: 10
    },
    plotOptions: {
      pie: {
        showInLegend: true
      }
    }
  }

  const optionsFirst = Highcharts.merge({}, circleChartTheme, chartOptionsFirst)
  const optionsSecond = Highcharts.merge({}, circleChartTheme, chartOptionsSecond)
  const optionsThird = Highcharts.merge({}, circleChartTheme, chartOptionsThird)

  return (
    <div>
      <Title
          paddingY="sm"
          size={4}
          tag="h4"
          text="align | verticalAlign"
      />
      <HighchartsReact
          highcharts={Highcharts}
          options={optionsFirst}
      />
      
      <Title
          paddingY="sm"
          size={4}
          tag="h4"
          text="layout"
      />
      <HighchartsReact
          highcharts={Highcharts}
          options={optionsSecond}
      />
      
      <Title
          paddingY="sm"
          size={4}
          tag="h4"
          text="x | y"
      />
      <HighchartsReact
          highcharts={Highcharts}
          options={optionsThird}
      />
    </div>
  )
}

export default CircleChartLegendPosition

Title

import React from 'react'

import { circleChartTheme } from 'playbook-ui'
import Highcharts from "highcharts"
import HighchartsReact from "highcharts-react-official"

const dataWithTitle = [
  {
    name: 'Facebook',
    y: 2498,
  },
  {
    name: 'YouTube',
    y: 2000,
  },
  {
    name: 'WhatsApp',
    y: 2000,
  },
  {
    name: 'Facebook Messenger',
    y: 1300,
  },
  {
    name: 'WeChat',
    y: 1165,
  },
  {
    name: 'Instagram',
    y: 1000,
  },
  {
    name: 'Tik Tok',
    y: 800,
  },
]

const CircleChartWithTitle = () => {
  const chartOptions = {
    title: { text: "Active Users on Social Media" },
    series: [{ data: dataWithTitle }],
  }

  const options = Highcharts.merge({}, circleChartTheme, chartOptions)

  return (
    <div>
      <HighchartsReact
          highcharts={Highcharts}
          options={options}
      />
    </div>
  )
}

export default CircleChartWithTitle

Inner Circle Size Options

import React from 'react'

import { circleChartTheme } from 'playbook-ui'
import Highcharts from "highcharts"
import HighchartsReact from "highcharts-react-official"

const dataFirst = [
  {
    name: 'Bugs',
    y: 8,
  },
  {
    name: 'Chores',
    y: 1,
  },
  {
    name: 'Stories',
    y: 12,
  },
]

const dataSecond = [
  {
    name: 'Queued',
    y: 7,
  },
  {
    name: 'In Progress',
    y: 6,
  },
  {
    name: 'Validation',
    y: 3,
  },
  {
    name: 'Done',
    y: 6,
  },
]

const dataThird = [
  {
    name: '1 Point Tickets',
    y: 2,
  },
  {
    name: '3 Point Tickets',
    y: 5,
  },
  {
    name: '5 Point Tickets',
    y: 6,
  },
  {
    name: '8 Point Tickets',
    y: 3,
  },
  {
    name: '13 Point Tickets',
    y: 1,
  },
]

const dataFourth = [
  {
    name: 'Facebook',
    y: 2498,
  },
  {
    name: 'YouTube',
    y: 2000,
  },
  {
    name: 'WhatsApp',
    y: 2000,
  },
  {
    name: 'Facebook Messenger',
    y: 1300,
  },
  {
    name: 'WeChat',
    y: 1165,
  },
  {
    name: 'Instagram',
    y: 1000,
  },
  {
    name: 'Tik Tok',
    y: 800,
  },
]

const CircleChartInnerSizes = () => {
  const chartOptionsSmall = {
    series: [{ 
      data: dataFirst,
      innerSize: '35%'
    }],
  }

  const chartOptionsMedium = {
    series: [{ 
      data: dataSecond,
      innerSize: '50%'
    }],
  }

  const chartOptionsLarge = {
    series: [{ 
      data: dataThird,
      innerSize: '85%'
    }],
  }

  const chartOptionsNone = {
    series: [{ 
      data: dataFourth,
      innerSize: '0%'
    }],
  }

  const optionsSmall = Highcharts.merge({}, circleChartTheme, chartOptionsSmall)
  const optionsMedium = Highcharts.merge({}, circleChartTheme, chartOptionsMedium)
  const optionsLarge = Highcharts.merge({}, circleChartTheme, chartOptionsLarge)
  const optionsNone = Highcharts.merge({}, circleChartTheme, chartOptionsNone)

  return (
    <div>
      <HighchartsReact
          highcharts={Highcharts}
          options={optionsSmall}
      />
      <HighchartsReact
          highcharts={Highcharts}
          options={optionsMedium}
      />
      <HighchartsReact
          highcharts={Highcharts}
          options={optionsLarge}
      />
      <div className="poop">
        <HighchartsReact
            highcharts={Highcharts}
            options={optionsNone}
        />
      </div>
    </div>
  )
}

export default CircleChartInnerSizes

Line Graph

Default

import React from 'react'

import { lineGraphTheme } from 'playbook-ui'
import Highcharts from "highcharts"
import HighchartsReact from "highcharts-react-official"

const data = [{
  name: 'Installation',
  data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
}, {
  name: 'Manufacturing',
  data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434],
}, {
  name: 'Sales & Distribution',
  data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387],
}, {
  name: 'Project Development',
  data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227],
}, {
  name: 'Other',
  data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111],
}]

const categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

const chartOptions = {
  series: data,
  title: { text: "Solar Employment Growth by Sector, 2010-2016" },
  subtitle: { text: "Source: thesolarfoundation.com" },
  xAxis: {
    categories: categories,
  },
  yAxis: {
    title: {
      text: "Number of Employees",
    },
  },
}

const LineGraphDefault = () => {
  const options = Highcharts.merge({}, lineGraphTheme, chartOptions)

  return(
    <div>
      <HighchartsReact
          highcharts={Highcharts}
          options={options}
      />
    </div>
  )
}

export default LineGraphDefault

Legend

import React from 'react'

import { lineGraphTheme } from 'playbook-ui'
import Highcharts from "highcharts"
import HighchartsReact from "highcharts-react-official"

const data = [{
  name: 'Number of Installations',
  data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
}]

const categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']

const chartOptions = {
  series: data,
  title: { text: "Line Graph with Legend" },
  xAxis: {
    categories: categories,
  },
  yAxis: {
    min: 0,
    title: {
      text: "Number of Employees",
    },
  },
  legend: {
    enabled: true,
  },
}

const LineGraphLegend = () => {
  const options = Highcharts.merge({}, lineGraphTheme, chartOptions)

  return(
    <div>
      <HighchartsReact
          highcharts={Highcharts}
          options={options}
      />
    </div>
  )
}

export default LineGraphLegend

Legend Position

Prop

x offsets the legend relative to its horizontal alignment. Negative x moves it to the left, positive x moves it to the right

y offsets the legend relative to its vertical alignment. Negative y moves it up, positive y moves it down.

import React from 'react'

import { lineGraphTheme, Title } from 'playbook-ui'
import Highcharts from "highcharts"
import HighchartsReact from "highcharts-react-official"

const data = [{
  name: 'Installation',
  data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
}, {
  name: 'Manufacturing',
  data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434],
}, {
  name: 'Sales & Distribution',
  data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387],
}, {
  name: 'Project Development',
  data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227],
}, {
  name: 'Other',
  data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111],
}]

const categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']

const LineGraphLegendPosition = (props) => {
  const chartOptionsFirst = {
    title: { text: "Alignment of Legend" },
    series: data,
    xAxis: {
      categories: categories,
    },
    yAxis: {
      min: 0,
      title: {
        text: "Number of Employees",
      },
    },
    legend: {
      enabled: true,
      align: 'right',
      verticalAlign: 'top'
    },
  }

  const chartOptionsSecond = {
    title: { text: "Layout of Legend" },
    series: data,
    xAxis: {
      categories: categories,
    },
    yAxis: {
      min: 0,
      title: {
        text: "Number of Employees",
      },
    },
    legend: {
      enabled: true,
      layout: 'vertical'
    },
  }

  const chartOptionsThird = {
    title: { text: "Offset of Legend" },
    series: data,
    xAxis: {
      categories: categories,
    },
    yAxis: {
      min: 0,
      title: {
        text: "Number of Employees",
      },
    },
    legend: {
      enabled: true,
      layout: 'vertical',
      x: 100,
      y: 10
    },
  }

  const optionsFirst = Highcharts.merge({}, lineGraphTheme, chartOptionsFirst)
  const optionsSecond = Highcharts.merge({}, lineGraphTheme, chartOptionsSecond)
  const optionsThird = Highcharts.merge({}, lineGraphTheme, chartOptionsThird)

  return (
    <div>
      <Title
          paddingY="sm"
          size={4}
          tag="h4"
          text="align | verticalAlign"
      />
      <HighchartsReact
          highcharts={Highcharts}
          options={optionsFirst}
      />
      
      <Title
          paddingY="sm"
          size={4}
          tag="h4"
          text="layout"
      />
      <HighchartsReact
          highcharts={Highcharts}
          options={optionsSecond}
      />
      
      <Title
          paddingY="sm"
          size={4}
          tag="h4"
          text="x | y"
      />
      <HighchartsReact
          highcharts={Highcharts}
          options={optionsThird}
      />
    </div>
  )
}

export default LineGraphLegendPosition

Legend Nonclickable

import React from 'react'

import { lineGraphTheme } from 'playbook-ui'
import Highcharts from "highcharts"
import HighchartsReact from "highcharts-react-official"

const data = [{
  name: 'Number of Installations',
  data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
}]

const categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']

const chartOptions = {
  title: {
    text: 'Line Graph with Legend Non Clickable',
  },
  xAxis: {
    categories: categories,
  },
  yAxis: {
    title: {
      text: 'Number of Employees',
    },
  },
  legend: {
    enabled: true,
    events: {
      itemClick: function () {
        return false;
      }
    }
  },
  series: data
}

const LineGraphLegendNonclickable = () => {
  const options = Highcharts.merge({}, lineGraphTheme, chartOptions)

  return (
    <div>
      <HighchartsReact
          highcharts={Highcharts}
          options={options}
      />
    </div>
  )
}

export default LineGraphLegendNonclickable

Height

By default, Highcharts have a height of 400px, but this can be customized. You can override the default by specifying either a percentage or a fixed pixel value.

Using a percentage maintains a consistent aspect ratio across different responsive sizes. For example, setting the height to 50% makes the chart’s height half of its width.

import React from 'react'

import { lineGraphTheme } from 'playbook-ui'
import Highcharts from "highcharts"
import HighchartsReact from "highcharts-react-official"

const data = [{
  name: 'Number of Installations',
  data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
}]

const categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

const LineGraphHeight = () => {
  const chartOptionsFirst = {
    title: {
      text: 'Fixed Height (300px)',
    },
    chart: {
      height: '300px'
    },
    xAxis: {
      categories: categories,
    },
    yAxis: {
      min: 0,
      title: {
        text: 'Number of Employees',
      },
    },
    series: data
  }

  const chartOptionsSecond = {
    title: {
      text: 'Percentage Height (50%)',
    },
    chart: {
      height: '50%'
    },
    xAxis: {
      categories: categories,
    },
    yAxis: {
      min: 0,
      title: {
        text: 'Number of Employees',
      },
    },
    series: data
  }

  const optionsFirst = Highcharts.merge({}, lineGraphTheme, chartOptionsFirst)
  const optionsSecond = Highcharts.merge({}, lineGraphTheme, chartOptionsSecond)

  return (
    <div>
      <HighchartsReact
          highcharts={Highcharts}
          options={optionsFirst}
      />

      <HighchartsReact
          highcharts={Highcharts}
          options={optionsSecond}
      />
    </div>
  )
}

export default LineGraphHeight

Color Overrides

Custom data colors allow for color customization to match the needs of business requirements.
Import the colors from Playbook's tokens, then set custom colors in the colors array using the desired color variables. Hex colors are also available eg: #CA0095.

import React from 'react'

import { lineGraphTheme, colors } from 'playbook-ui'
import Highcharts from "highcharts"
import HighchartsReact from "highcharts-react-official"

const data = [{
  name: 'Installation',
  data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
}, {
  name: 'Manufacturing',
  data: [24916, 28064, 29742, 40851, 50590, 65282, 70121, 85434],
}, {
  name: 'Sales & Distribution',
  data: [11744, 17722, 16005, 19771, 25185, 28377, 36147, 43387],
}, {
  name: 'Project Development',
  data: [5332, 6344, 7988, 12169, 15112, 14452, 22400, 30227],
}, {
  name: 'Other',
  data: [null, null, null, 3112, 4989, 5816, 15274, 18111],
}]

const categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

const LineGraphColors = () => {
  const chartOptions = {
    title: {
      text: 'Line Graph with Custom Data Colors',
    },
    xAxis: {
      categories: categories,
    },
    yAxis: {
      min: 0,
      title: {
        text: 'Number of Employees',
      },
    },
    series: data,
    colors: [colors.data_4, colors.data_5, "#144075", colors.data_7, colors.data_8]
  }

  const options = Highcharts.merge({}, lineGraphTheme, chartOptions)

  return (
    <div>
      <HighchartsReact
          highcharts={Highcharts}
          options={options}
      />
    </div>
  )
}

export default LineGraphColors

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.

Contribute on GitHub

As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.