@visa/visa-charts-data-table NPM

@visa/visa-charts-data-table

An image depicting an example of the default data-table component

<data-table
  uniqueID={this.chartID}
  isCompact
  tableColumns={this.tableColumns}
  data={this.tableData}
  padding={this.padding}
  margin={this.margin}
  hideDataTable={this.accessibility.hideDataTableButton}
/>

# Installation Steps

Using npm
```
$ npm i @visa/visa-charts-data-table
```
Using yarn
```
$ yarn add @visa/visa-charts-data-table
```

# Props Documentation

# Data Table Props <>

The data-component expects to be utilized within a Visa Chart Component, we do some data preparation in each chart to try and map chart data into a structure that is meaningful for an accompanying data table. Properties for this component are documented below, but you should also refer to a Visa Chart Component to see detail on how this sub-component is leveraged.

Name	Type	Default Value(s)	Description
`margin`	object (custom type)	IBoxModelType	Expects the margin property to be passed from a visa chart components chart. This prop is used to determine button placement, when visible.
`padding`	object (custom type)	IBoxModelType	Expects the padding property to be passed from a visa chart components chart. This prop is used to determine button placement, when visible.
`isCompact`	boolean	false	Set to true by each visa chart component, renders a more compact version of the data table.
`hideDataTable`	boolean	false	If true, hides the data table button (but it is still available to screen reader users).
`uniqueID`	string	`undefined`	ID used to identify chart (must be unique per data table), helpful for validation messages. A string must be passed.
`tableColumns`	string[]	`undefined`	Populates the column headers of the table, in order.
`data`	object[]	`undefined`	Populates the content/rows of the table, data needs to be aligned to `tableColumns` provided.
`unitTest`	boolean	false	When set to true, adds testing attributes to the rendered data-table components for ease of selection during unit testing.

IBoxModelType Definition

Name	Type	Default Value(s)	Description
`top`	number	height * 0.01	Sets the top margin/padding for the chart container.
`bottom`	number	height * 0.01	Sets the bottom margin/padding for the chart container.
`left`	number	width * 0.01	Sets the top margin/padding for the chart container.
`right`	number	width * 0.01	Sets the top margin/padding for the chart container.