@yozora/react-table

This component is for rendering the Table, TableRow, TableCell data produced by @yozora/tokenizer-table.
This component has been built into @yozora/react-markdown, you can use it directly.

Install

• npm

  npm install --save @yozora/react-table

• yarn

  yarn add @yozora/react-table

Usage

• Basic:

  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 = (
    <Table
      aligns={[ 'center', 'right' ]}
      ths={ths}
      tds={tds}
      style={{ color: 'orange', fontSize: '16px' }}
    />
  )

Props

Name	Type	Required	Default	Description
aligns	`(string	undefined)[]>`	true	-
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'.

Related

• @yozora/ast
• @yozora/react-markdown
• @yozora/tokenizer-table
• mdast table
• mdast table row
• mdast table cell