React to styled table

Simple table easy to use, with minimal styling.

Download

Our table components are available at npm, if you have an existing application run the following command to download it to your project.

npm install @react-to-styled/table

or

yarn add @react-to-styled/table

Import

import { Table, Paginator } from '@react-to-styled/table'

Dependencies

All our components depend on these dependencies

{
  "peerDependencies": {
    "react": ">=16.8.0",
    "react-dom": ">=16.8.0",
    "styled-components": ">=5"
  }
}

Usage

Here is a quick example to get you started:

import React from 'react'
import ReactDOM from 'react-dom'
import { Table } from '@react-to-styled/table'

function App() {
  const columns = {
    title: {
      header: 'Title',
      Cell: ({ data: { title } }) => <span>{title}</span>,
    },
    price: {
      header: 'Price',
      Cell: ({ data: { price } }) => <span>{price}</span>,
    },
  }

  const data = [
    { title: 'One', price: 100 },
    { title: 'Two', price: 200 },
  ]

  return <Table data={data} columns={columns} />
}

ReactDOM.render(<App />, document.querySelector('#app'))

You can also check our storybook for more examples