# @noxify/gridsome-remark-table-align

> Gridsome Remark plugin move the `table` align defintion to the `tableCell` definition.

Latest version **1.0.0** (published 2020-01-01) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @noxify/gridsome-remark-table-align
pnpm add @noxify/gridsome-remark-table-align
yarn add @noxify/gridsome-remark-table-align
bun add @noxify/gridsome-remark-table-align
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2020-01-01 |
| First published | 2020-01-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Marcus Reinhardt |
| Maintainers | noxify |
| Keywords | vue, remark, gridsome, gridsome-plugin, markdown, css, table, align, transform |

## Links

- npm: https://www.npmjs.com/package/@noxify/gridsome-remark-table-align
- Repository: https://github.com/noxify/gridsome-remark-table-align
- Issues: https://github.com/noxify/gridsome-remark-table-align/issues
- npm.io page: https://npm.io/package/@noxify/gridsome-remark-table-align

## Dependencies (1)

- [unist-util-visit](https://npm.io/package/unist-util-visit.md) ^2.0.1

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2020-01-01

## README

# gridsome-remark-table-align
Gridsome Remark plugin move the `table` align defintion to the `tableCell` definition.

With this changes, you can use [@noxify/gridsome-remark-classes](https://github.com/noxify/gridsome-remark-classes) to add your own classes.


# Installation

```
npm install --save @noxify/gridsome-remark-table-align
```

# Configuration

## Globally

Inside the `gridsome.config.js` you can define it globally to enable this transformer for all data sources.

```js
module.exports = {

  plugins: [
    {
      use: '@gridsome/source-filesystem',
      options: {
        typeName: 'Blog',
        path: './content/blog/**/*.md',
      }
    }
  ],

  transformers : {
    remark : {
      plugins : [
        '@noxify/gridsome-remark-table-align'
      ]
    }
  }
}
```

## Data Source

Inside the `gridsome.config.js` you can define it individual for each data source.

```js
module.exports = {

  plugins: [
    {
      use: '@gridsome/source-filesystem',
      options: {
        typeName: 'Blog',
        path: './content/blog/**/*.md',
        remark: {
          plugins: [
            '@noxify/gridsome-remark-table-align'
          ]
        }
      }
    }
  ]
}
```

# Example

## Example table

```md
| Tables   |      Are      |  Cool |
|----------|:-------------:|------:|
| col 1 is |  left-aligned | $1600 |
| col 2 is |    centered   |   $12 |
| col 3 is | right-aligned |    $1 |
```

## gridsome.config.js

```js
transformers : {
  remark : {
    plugins : [
      '@noxify/gridsome-remark-table-align',
      ['@noxify/gridsome-remark-classes', {
        'table' : 'table',
        'tableCell[align=center]' : 'text-center',
        'tableCell[align=right]': 'text-right',
      }]
    ]
  }
},
```

## Rendered table

```html
<table class="table">
  <thead>
    <tr>
      <th>Tables</th>
      <th class="text-center">Are</th>
      <th class="text-right">Cool</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>col 1 is</td>
      <td class="text-center">left-aligned</td>
      <td class="text-right">$1600</td>
    </tr>
    <tr>
      <td>col 2 is</td>
      <td class="text-center">centered</td>
      <td class="text-right">$12</td>
    </tr>
    <tr>
      <td>col 3 is</td>
      <td class="text-center">right-aligned</td>
      <td class="text-right">$1</td>
    </tr>
  </tbody>
</table>
```

---
_Source: https://npm.io/package/@noxify/gridsome-remark-table-align · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._