# TableView

Table view component to visualize a list of data in a table

```js
import TableView from 'deepsight-react-components/TableView';

return <TableView ... />
```

## Props

| prop                    | type                 | required | default                                          | description                                                                |
| :---------------------- | :------------------- | :------: | :----------------------------------------------- | :------------------------------------------------------------------------- |
| `isLoading`             | `bool`               | `false`  | `false`                                          | Whether it should display loading state                                    |
| `minWidth`              | `number`             | `false`  | `600`                                            | The minimum width the table view has                                       |
| `defaultOrderBy`        | `string` or `number` | `false`  | `null`                                           | The id of the default column on which the sort should be applied           |
| `defaultOrderType`      | `string`             | `false`  | `asc`                                            | The order type that should be applied by default                           |
| `columns`               | `array`              |  `true`  |                                                  | The column settings to apply on the table view listing                     |
| `data`                  | `array`              |  `true`  |                                                  | The list of data to display in the table based on the columns settings     |
| `highligthedRowsId`     | `array`              | `false`  | `[]`                                             | The list column ids that should be highlighted                             |
| `positionTop`           | `number`             | `false`  | `0`                                              | The top position in pixel to set on the table view when being displayed    |
| `positionBottom`        | `number`             | `false`  | `0`                                              | The bottom position in pixel to set on the table view when being displayed |
| `displayColumnsFilters` | `boolean`            | `false`  | `true`                                           | Whether it should display filters in the columns headers                   |
| `labelEmptyState`       | `string`             | `false`  | `Aucun résultat ne correspond à votre recherche` | Text displayed when there is no data in the table                          |

## Columns settings

The columns settings wil represent the way the table is being displayed. It is important to properly set them and to attach a unique `id` to each of them.

Here are some settings you can apply:

| prop          | type       | required | possible values                                   | description                                                                                          |
| :------------ | :--------- | :------: | :------------------------------------------------ | :--------------------------------------------------------------------------------------------------- |
| `name`        | `string`   |  `true`  |                                                   | The name of the column to display                                                                    |
| `type`        | `string`   |  `true`  | `currency` `percentage` `numeric` `date` `string` | The type of the column which will influence the formatting when rendering                            |
| `propertyKey` | `string`   |  `true`  |                                                   | The name of the property to retrieve in the list of data                                             |
| `tooltipText` | `string`   | `false`  |                                                   | When set, it will display the tooltip component with the given text                                  |
| `render`      | `function` | `false`  |                                                   | When set, the given function will override the default formatting method attached to the column type |

## Data settings

Just like the columns, it is important to attached a unique `id` to each item in the list