How to use the hig-vanilla.Table.AvailableDensities function in hig-vanilla

}
    return this.state.allRowsSelected;
  }

  render() {
    const columns = [this.checkboxHeader()].concat(this.props.columns);
    const enhancedData = this.props.data.map(this.mergeRowState);
    return this.props.children(columns, enhancedData, this.props.density);
  }
}

SelectableTable.propTypes = {
  /**
   * Sets the size of the table
   */
  density: PropTypes.oneOf(VanillaTable.AvailableDensities),
  /**
   * Provides content table cells
   */
  data: PropTypes.arrayOf(PropTypes.object),
  /**
   * Called when user selects or deselects a row
   */
  onRowSelectionChange: PropTypes.func,
  /**
   * Function to render the table. Signature is fn(columns, data, density)
   */
  children: PropTypes.func,
  /**
   * Called when user checks or unchecks the select-all checkbox
   */
  onSelectAllSelectionChange: PropTypes.func,

PropTypes.shape({
      Header: PropTypes.string,
      alignment: PropTypes.alignment,
      width: PropTypes.string,
      id: PropTypes.string,
      Cell: PropTypes.any
    })
  ),
  /**
   * Provides content table cells
   */
  data: PropTypes.arrayOf(PropTypes.object),
  /**
   * Sets the size of the table
   */
  density: PropTypes.oneOf(VanillaTable.AvailableDensities),
  /**
   * Called when user selects or deselects a row
   */
  onRowSelectionChange: PropTypes.func,
  /**
   * Called when user checks or unchecks the select-all checkbox
   */
  onSelectAllSelectionChange: PropTypes.func,
  /**
   * When true, adds checkboxes to each row, and a select-all checkbox to the header
   */
  selectable: PropTypes.bool
};