# xpl-table

Tables are used to organize and display information from a data set. 

<!-- Auto Generated Below -->


## Properties

| Property          | Attribute     | Description                                                                                                                 | Type         | Default     |
| ----------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------- | ------------ | ----------- |
| `columns`         | --            | The header values for each column.                                                                                          | `string[]`   | `undefined` |
| `data`            | --            | The data for the body of the table.                                                                                         | `string[][]` | `undefined` |
| `footer`          | --            | The data for the footer of the table.                                                                                       | `string[][]` | `undefined` |
| `freeze`          | `freeze`      | When true, the first column of the table is sticky and will cover the leftmost rows in a horizontally scrollable container. | `boolean`    | `undefined` |
| `isSortable`      | `is-sortable` | Toggles to show the sort button on each table head                                                                          | `boolean`    | `false`     |
| `multiselect`     | `multiselect` | Toggles a selectable checkbox for each row in the table                                                                     | `boolean`    | `undefined` |
| `selectedValues`  | --            | The values for the input for each row when multiselect is activated.                                                        | `string[]`   | `[]`        |
| `sortableColumns` | --            | Manually determined if the column is sortable                                                                               | `boolean[]`  | `[]`        |
| `striped`         | `striped`     | Toggles an optional styling of the background of each even row of the table body.                                           | `boolean`    | `undefined` |


## Events

| Event         | Description                                                                                                                                                                                                               | Type                                                                       |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
| `sortChanged` | Emits an event whenever the sort changes. The 'sortChanged' event passes an object with colNum (number), colName (string), sortTypeArr(string[]). The default action can be overridden by calling event.preventDefault(). | `CustomEvent<{ colNum: number; colName: string; sortTypeArr: string[]; }>` |
| `tableSelect` | Callback function that is called when the checkbox for a row of a `multiselect` table is checked                                                                                                                          | `CustomEvent<any>`                                                         |


## Dependencies

### Depends on

- [xpl-checkbox](../xpl-checkbox)
- [xpl-icon](../xpl-icon)

### Graph
```mermaid
graph TD;
  xpl-table --> xpl-checkbox
  xpl-table --> xpl-icon
  style xpl-table fill:#f9f,stroke:#333,stroke-width:4px
```

----------------------------------------------

*Built with [StencilJS](https://stenciljs.com/)*