# @visa/visa-charts-data-table

> simple data table component for chart data

Latest version **3.0.2** (published 2026-03-26) · SEE LICENCE IN LICENSE license · 0 weekly downloads

## Install

```sh
npm install @visa/visa-charts-data-table
pnpm add @visa/visa-charts-data-table
yarn add @visa/visa-charts-data-table
bun add @visa/visa-charts-data-table
```

## Health

**Score 55/100 (C)** — status: active.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; large bundle.

## Facts

| | |
|---|---|
| Version | 3.0.2 |
| Published | 2026-03-26 |
| First published | 2021-02-12 |
| Weekly downloads | 0 |
| License | SEE LICENCE IN LICENSE |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 33.5 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 187 |
| Author | Visa Data Experience Team |
| Maintainers | chris-demartini |

## Links

- npm: https://www.npmjs.com/package/@visa/visa-charts-data-table
- Repository: https://github.com/visa/visa-chart-components
- Homepage: https://github.com/visa/visa-chart-components#readme
- Issues: https://github.com/visa/visa-chart-components/issues
- npm.io page: https://npm.io/package/@visa/visa-charts-data-table

## Dependencies (3)

- [d3-selection](https://npm.io/package/d3-selection.md) ^1.4.2
- [@visa/charts-types](https://npm.io/package/@visa/charts-types.md) ^0.6.6
- [@visa/visa-charts-utils](https://npm.io/package/@visa/visa-charts-utils.md) ^5.5.0

## Recent versions

- 3.0.2 (latest) — 2026-03-26
- 3.0.1 — 2024-11-15
- 3.0.0 — 2024-10-25
- 2.4.3 — 2024-02-16
- 2.4.2 — 2024-02-09
- 2.4.1 — 2023-09-28
- 2.4.0 — 2023-06-16
- 2.3.1 — 2023-02-01
- 2.3.0 — 2023-01-14
- 2.2.2 — 2022-07-28
- 2.2.1 — 2022-06-27
- 2.2.0 — 2022-03-30
- 2.1.1 — 2022-02-04
- 2.1.0 — 2021-11-18
- 2.0.10 — 2021-10-27
- … 7 more at https://npm.io/package/@visa/visa-charts-data-table/versions

## README

# @visa/visa-charts-data-table

![An image depicting an example of the default data-table component](./docs/data-table-1.png 'Example image of a data table')
<br>

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

<br>

<details open="open">
  <summary>Jump To:</summary>
  <ol>
    <li>
      <a href="#installation-steps">Installation Steps</a>
    </li>
    <li>
      <a href="#props-documentation">Props Documentation</a>
      <ul>
        <li><a href="#base-props">Data Table Props </a></li>
      </ul>
    </li>
  </ol>
</details>
<br>

## <a name="installation-steps">#</a> Installation Steps

---

- Using npm

  ```
  $ npm i @visa/visa-charts-data-table
  ```

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

<br>

## <a name="props-documentation">#</a> Props Documentation

---

<br>

### <a name="base-props" href="#base-props">#</a> Data Table Props [<>](./src/components/data-table/data-table.tsx 'Source')

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](../bar-chart) to see detail on how this sub-component is leveraged.

| Name            | Type                 | Default Value(s)                            | Description                                                                                                                                  |
| --------------- | -------------------- | ------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| `margin`        | object (custom type) | [IBoxModelType](../types/src/prop-types.ts) | 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](../types/src/prop-types.ts) | 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.                   |

<br>

#### 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.    |

<br>
<br>

---
_Source: https://npm.io/package/@visa/visa-charts-data-table · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._