render markdown table in react
npm install @yozora/react-table
@yozora/react-table
alt="Npm Version"
src="https://img.shields.io/npm/v/@yozora/react-table.svg"
/>
alt="Npm Download"
src="https://img.shields.io/npm/dm/@yozora/react-table.svg"
/>
alt="Npm License"
src="https://img.shields.io/npm/l/@yozora/react-table.svg"
/>
alt="Module formats: cjs, esm"
src="https://img.shields.io/badge/module_formats-cjs%2C%20esm-green.svg"
/>
alt="Node.js Version"
src="https://img.shields.io/node/v/@yozora/react-table"
/>
alt="React version"
src="https://img.shields.io/npm/dependency-version/@yozora/react-table/peer/react"
/>
alt="Tested with Jest"
src="https://img.shields.io/badge/tested_with-jest-9c465e.svg"
/>
alt="Code Style: prettier"
src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square"
/>
This component is for rendering the [Table][@yozora/ast#table], [TableRow][@yozora/ast#tablerow], [TableCell][@yozora/ast#tablecell] data produced by
[@yozora/tokenizer-table][].\
This component has been built into [@yozora/react-markdown][], you can use it directly.
* npm
``bash`
npm install --save @yozora/react-table
* yarn
`bash`
yarn add @yozora/react-table
## Usage
* Basic:
`tsx
import React from 'react'
import Table from '@yozora/react-table'
import '@yozora/react-table/lib/esm/index.css'
const ths: React.ReactNode[] = ['Name', 'Age']
const tds: React.ReactNode[][] = [
['Alice', 18],
['Bob', 19],
]
const wrapper = (
$3
Name | Type | Required | Default | Description
:----------:|:-----------------------:|:---------:|:-------:|:-------------
aligns | (string|undefined)[]> | true | - | Table cells in thead
ths | React.ReactNode[] | true | - | Table cells in thead
tds | React.ReactNode[] | true | - | Table cells in tbody
className | string | false | - | Root css class
style | React.CSSProperties | false | - | Root css style*
aligns: Array<'left'|'center'|'right'|undefined>*
className: The root element of this component will always bind with the
CSS class 'yozora-table'`.* [@yozora/ast][]
* [@yozora/react-markdown][]
* [@yozora/tokenizer-table][]
* [mdast table][]
* [mdast table row][]
* [mdast table cell][]
[@yozora/ast]: https://www.npmjs.com/package/@yozora/ast#table
[@yozora/ast#table]: https://www.npmjs.com/package/@yozora/ast#table
[@yozora/ast#tablerow]: https://www.npmjs.com/package/@yozora/ast#tablerow
[@yozora/ast#tablecell]: https://www.npmjs.com/package/@yozora/ast#tablecell
[@yozora/react-markdown]: https://www.npmjs.com/package/@yozora/react-markdown
[@yozora/tokenizer-table]: https://www.npmjs.com/package/@yozora/tokenizer-table
[mdast table]: https://github.com/syntax-tree/mdast#table
[mdast table row]: https://github.com/syntax-tree/mdast#tablecell
[mdast table cell]: https://github.com/syntax-tree/mdast#tablerow