v0.2.5
Documentation
IntroductionGetting StartedSyntaxComponentsThemingPresentExamples
API
@mdxp/core
@mdxp/components
@mdxp/rehypex-plugins
Auto ImportBetter MediaTable Align

Table Align

Table Align is a Rehype plugin that transforms the deprecated alignment properties of tables, to the appropriate css styles.

NOTE
This plugin works on any valid HAST and is thus a regular Rehype plugin, as it has nothing to do with MDXHAST or JSX.

Usage

This plugin can be used in any Rehype pipeline, but here we show an example of setting it up with MDX-JS. 

// Webpack example
const rehypeTableAlign = require('@mdxp/rehypex-plugins/table-align');
module.exports = {
  module: {
    rules: [
      {
        test: /\.mdx$/,
        use: [
          'babel-loader',
          {
            loader: '@mdx-js/loader',
            options: {
              rehypePlugins: [
                tableAlign
              ]
            }
          }
        ]
      },
      ...
    ]
  }
}

Examples

Once this plugin is setup, you can use the classic markdown table alignment indicators, and it will still work in environments that do not accept the old deprecated alignment properties anymore (eg. React):

| Column 1 (Left Aligned) | Column 2 (Middle Aligned) | Column 3 (Right Aligned) |
|:------------------------|:-------------------------:|-------------------------:|
| Cell 1.1                | Cell 1.2                  | Cell 1.3                 |
| Cell 2.1                | Cell 2.2                  | Cell 2.3                 |
| Cell 3.1                | Cell 3.2                  | Cell 3.3                 |