# TableDraggable

Responsive table with drag for mobile sizes. The first column is set with sticky positioning for mobile devices.

### Usage

```html
<m-table-draggable
  :header-items="['Name','Age']"
  :body-items="[['Alex', 20],['Jasmin', 37]]"/>
```

## Properties

| Name                  | Type         | Default          | Describe                                                                                                                                                                                    |
|-----------------------|--------------|------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| headerItems           | Array        | `[]`             | The header items as array strings or object with `align` and `text` attributes. The alignment can be `left`, `right`, `center`. Eg: `[ 'Name', 'Age', { text: 'Balance', align: 'right'} ]` |
| bodyItems             | Array Vector | `[][]`           | The body items as array of vectors.                                                                                                                                                         |
| striped               | Boolean      | `false`          | To set the rows with default striped colors.                                                                                                                                                |
| stripedColor          | String       | `#f4f4f7`        | The striped color for body rows.                                                                                                                                                            |
| bodyTextColor         | String       | `inherit`        | The body text color.                                                                                                                                                                        |
| backgroundColor       | String       | `#ffffff`        | The table background color.                                                                                                                                                                 |
| headerTextColor       | String       | `inherit`        | The header text color.                                                                                                                                                                      |
| headerBackgroundColor | String       | `#ffffff`        | The header background color.                                                                                                                                                                |
| zIndex                | Number       | `1000`           | The z-index for first column items.                                                                                                                                                         |
| borderColor           | String       | `#e7e7e7`        | The borders color.                                                                                                                                                                          |
| borderWidth           | String       | `1px`            | The border width in css value.                                                                                                                                                              |
| borderless            | Boolean      | `false`          | To set borders transparent.                                                                                                                                                                 |
| borders               | String       | `header|columns` | Borders to show. Values separated by `|`. Possible values: `columns`, `rows`, `header`, `container`.                                                                                        |

## Slots

| Slot name                      | Slot props           | Description                                                                                                             |
|--------------------------------|----------------------|-------------------------------------------------------------------------------------------------------------------------|
| header-cells                   | `{cellData}`         | To customize all cells of the header.                                                                                   |
| header-cell-{index}            | `{cellData}`         | To customize individual cell of the header.                                                                             |
| body-row-{index}               | `{rowData,rowStyle}` | To customize cells in a row of the table body. The `rowStyle` property contains the row style such as row parity style. |
| body-column-{index}            | `{cellData}`         | To customize column cells of the table body.                                                                            |
| body-x{columnIndex}y{rowIndex} | `{cellData}`         | To customize individual cell of the table body.                                                                         |