# Tables and lists
> A Table serves as a dynamic visual representation of information, enabling users to engage with, analyze, and make well-informed decisions based on the presented data.

Vera supports the following data display types:

| Type           | When to use                        | Complexity                                                                           |
| -------------- | ---------------------------------- | ------------------------------------------------------------------------------------ |
| Data list      | to show keys and values            | Very simple, cannot contain multiple values, does not offer further interaction      |
| Basic table    | to show a table of data            | Regular, it can contain multiple columns, but it does not offer advanced interaction |
| Advanced table | to show an extensive table of data | Offers further interaction                                                           |

## Data list

<DataList.Root orientation="vertical" emphasize="label">
  <DataList.Row>
    <DataList.Label>When to use</DataList.Label>
    <DataList.Value marginTop="spacingS">
      When you want to show some pairs of key and value.
    </DataList.Value>
  </DataList.Row>
  <DataList.Row>
    <DataList.Label>Description</DataList.Label>
    <DataList.Value marginTop="spacingS">
      This simple list consists of only rows, where the first cell is used as
      the "key" and the second cell shows the value.
      <br />
      You can show text, icons, links, labels or button as the value. You may
      also combine text with another element.
    </DataList.Value>
  </DataList.Row>
  <DataList.Row>
    <DataList.Label>Behaviour</DataList.Label>
    <DataList.Value marginTop="spacingS">
      There is no interactive behaviour.
    </DataList.Value>
  </DataList.Row>
  <DataList.Row>
    <DataList.Label>Components to use</DataList.Label>
    <DataList.Value marginTop="spacingS">
      <ul margin="none">
        <li>
          <Link href="/components/data-list">Data List</Link>
        </li>
      </ul>
    </DataList.Value>
  </DataList.Row>
</DataList.Root>

## Basic table

<DataList.Root orientation="vertical" emphasize="label">
  <DataList.Row>
    <DataList.Label>When to use</DataList.Label>
    <DataList.Value marginTop="spacingS">
      When you want to show a table of data
    </DataList.Value>
  </DataList.Row>
  <DataList.Row>
    <DataList.Label>Description</DataList.Label>
    <DataList.Value marginTop="spacingS">
      The basic table is used to show some data, but does not offer further
      interaction. It is recommend to use the simple version of a table whenever
      the amount of data is limited.
    </DataList.Value>
  </DataList.Row>
  <DataList.Row>
    <DataList.Label>Behaviour</DataList.Label>
    <DataList.Value marginTop="spacingS">
      Basic interaction of a table like vertical and horizontal scrolling.
    </DataList.Value>
  </DataList.Row>
  <DataList.Row>
    <DataList.Label>Components to use</DataList.Label>
    <DataList.Value marginTop="spacingS">
      <ul margin="none">
        <li>
          <Link href="/components/tables/table">Table</Link>
        </li>
      </ul>
    </DataList.Value>
  </DataList.Row>
</DataList.Root>

## Advanced table

<DataList.Root orientation="vertical" emphasize="label">
  <DataList.Row>
    <DataList.Label>When to use</DataList.Label>
    <DataList.Value marginTop="spacingS">
      When you want to show a table of extensive data and you need to offers
      some more interaction.
    </DataList.Value>
  </DataList.Row>
  <DataList.Row>
    <DataList.Label>Description</DataList.Label>
    <DataList.Value marginTop="spacingS">
      The advanced table is used to show extensive data, and it offers further
      interaction. It is recommend to use the advanced version of a table
      whenever the amount of data is a lot.
    </DataList.Value>
  </DataList.Row>
  <DataList.Row>
    <DataList.Label>Behaviour</DataList.Label>
    <DataList.Value marginTop="spacingS">
      Basic interaction of a table like vertical and horizontal scrolling.
      <br />
      Additionally it offers sorting and filtering, pagination, row selection,
      column view configuration and rows virtualization.
    </DataList.Value>
  </DataList.Row>
  <DataList.Row>
    <DataList.Label>Components to use</DataList.Label>
    <DataList.Value marginTop="spacingS">
      <ul margin="none">
        <li>
          <Link href="/components/tables/table#integration-with-tanstack-table">
            Advanced Table
          </Link>
        </li>
      </ul>
    </DataList.Value>
  </DataList.Row>
</DataList.Root>