# Data tables

Zensical defines default styles for data tables – an excellent way of rendering tabular data in project documentation. Furthermore, customizations like [sortable tables](<#sortable-tables>) can be achieved with a third-party library and some [additional JavaScript](<https://zensical.org/docs/customization/#additional-javascript>).

## Configuration

This configuration enables Markdown table support, which should normally be enabled by default, but to be sure, add the following lines to your configuration file:

```toml
[project.markdown_extensions]
tables = {}
```

```yaml
markdown_extensions:
  - tables
```

See additional configuration options:

- [Tables](<https://zensical.org/docs/compatibility/markdown/python-markdown/#tables>)

## Usage

Data tables can be used at any position in your project documentation and can contain arbitrary Markdown, including inline code blocks, as well as [icons and emojis](<https://zensical.org/docs/authoring/icons-emojis/index.md>):

Data table

```markdown
| Method   | Description                          |
| -------- | ------------------------------------ |
| `GET`    | :lucide-check: Fetch resource        |
| `PUT`    | :lucide-check-check: Update resource |
| `DELETE` | :lucide-x: Delete resource           |
```

| Method | Description |
| --- | --- |
| `GET` | Fetch resource |
| `PUT` | Update resource |
| `DELETE` | Delete resource |

### Column alignment

If you want to align a specific column to the `left`, `center` or `right`, you can use the [regular Markdown syntax](<https://www.markdownguide.org/extended-syntax/#tables>) placing `:` characters at the beginning and/or end of the divider.

Data table, columns aligned to left

```markdown
| Method   | Description                          |
| :------- | :----------------------------------- |
| `GET`    | :lucide-check: Fetch resource        |
| `PUT`    | :lucide-check-check: Update resource |
| `DELETE` | :lucide-x: Delete resource           |
```

| Method | Description |
| :--- | :--- |
| `GET` | Fetch resource |
| `PUT` | Update resource |
| `DELETE` | Delete resource |

Data table, columns centered

```markdown
|  Method  |             Description              |
| :------: | :----------------------------------: |
|  `GET`   |    :lucide-check: Fetch resource     |
|  `PUT`   | :lucide-check-check: Update resource |
| `DELETE` |      :lucide-x: Delete resource      |
```

| Method | Description |
| :---: | :---: |
| `GET` | Fetch resource |
| `PUT` | Update resource |
| `DELETE` | Delete resource |

Data table, columns aligned to right

```markdown
|   Method |                          Description |
| -------: | -----------------------------------: |
|    `GET` |        :lucide-check: Fetch resource |
|    `PUT` | :lucide-check-check: Update resource |
| `DELETE` |           :lucide-x: Delete resource |
```

| Method | Description |
| ---: | ---: |
| `GET` | Fetch resource |
| `PUT` | Update resource |
| `DELETE` | Delete resource |

## Customization

### Sortable tables

If you want to make data tables sortable, you can add [tablesort](<https://tristen.ca/tablesort/demo/>), which is natively integrated with Zensical and will also work with [instant navigation](<https://zensical.org/docs/setup/navigation/#instant-navigation>) via [additional JavaScript](<https://zensical.org/docs/customization/#additional-javascript>):

```js
document$.subscribe(function() {
  var tables = document.querySelectorAll("article table:not([class])")
  tables.forEach(function(table) {
    new Tablesort(table)
  })
})
```

```toml
[project]
extra_javascript = [
  "https://unpkg.com/tablesort@5.3.0/dist/tablesort.min.js",
  "javascripts/tablesort.js",
]
```

```yaml
extra_javascript:
  - https://unpkg.com/tablesort@5.3.0/dist/tablesort.min.js
  - javascripts/tablesort.js
```

After applying the customization, data tables can be sorted by clicking on a column:

Data table, columns sortable

```markdown
| Method      | Description                          |
| ----------- | ------------------------------------ |
| `GET`       | :material-check:     Fetch resource  |
| `PUT`       | :material-check-all: Update resource |
| `DELETE`    | :material-close:     Delete resource |
```

| Method | Description |
| --- | --- |
| `GET` | Fetch resource |
| `PUT` | Update resource |
| `DELETE` | Delete resource |

Note that [tablesort](<https://tristen.ca/tablesort/demo/>) provides alternative comparison implementations like numbers, filesizes, dates and month names. See the [tablesort documentation](<https://tristen.ca/tablesort/demo/>) for more information.