@yozora/react-table-row

This package is designed to render mdast table row type data

Install

• npm

  npm install --save @yozora/react-table-row

• yarn

  yarn add @yozora/react-table-row

Usage

• Use in React project

  • Pure

    import React from 'react'
    import TableRow from '@yozora/react-table-row'
    
    const wrapper = (
      <table>
        <tbody>
          <TableRow style={ { color: 'orange', fontSize: '16px' } }>
            <td>
              some text1
              <span>some text2</span>
            </td>
          </TableRow>
        </tbody>
      </table>
    )

  • With theme

    import React from 'react'
    import { DefaultTheme, ThemeProvider } from 'styled-components'
    import TableRow from '@yozora/react-table-row'
    
    const theme: DefaultTheme = {
      yozora: {
        tableRow: {
          // background: 'red',
          evenBackground: 'blue',
        }
      }
    }
    
    const wrapper = (
      <ThemeProvider theme={ theme }>
        <table>
          <tbody>
            <TableRow style={ { color: 'orange', fontSize: '16px' } }>
              <td>
                some text1
                <span>some text2</span>
              </td>
            </TableRow>
          </tbody>
        </table>
      </ThemeProvider>
    )

• Props

  Name	Type	Required	Default	Description
  ref	React.RefObject<HTMLTableRowElement>	false	-	Forwarded ref callback
  children	React.ReactNode	true	-	table row contents

  TableRowProps inherited all attributes of HTMLTableRowElement (React.HTMLAttributes<HTMLTableRowElement>)

• Theme

  Prop Name	Default
  background	none
  evenBackground	none

  See YozoraTableRowTheme for details.

References

• mdast table
• mdast table row
• mdast table cell