@alarivan/react-styled-table

React table with styled-components

Usage no npm install needed!

<script type="module">
  import alarivanReactStyledTable from 'https://cdn.skypack.dev/@alarivan/react-styled-table';
</script>

README

@alarivan/react-styled-table

React table with styled-components

NPM JavaScript Style Guide

Demo

Demo

Install

@alarivan/react-styled-table

NPM

npm install --save @alarivan/react-styled-table

Yarn

yarn add @alarivan/react-styled-table

Development

yarn

yarn start

Testing

yarn test

yarn test:watch

Running examples

yarn

cd example

yarn

yarn start

Usage

import React from 'react'
import styled from 'styled-components'
import {
  Table,
  ReactStyledTableCell,
  ReactStyledTableColumn,
  ReactStyledTableDataItem,
  ReactStyledTableDataItemValue
} from '@alarivan/react-styled-table'


const BlueTableCell = styled(ReactStyledTableCell)`
  background: lightblue;
`

const GreenTableCell = styled(ReactStyledTableCell)`
  background: lightgreen;
`

const CustomTable = styled(Table)`
  background: magenta;
`

const data: ReactStyledTableDataItem[] = [
  {
    name: 'John',
    movie_rating: 4,
    city: 'Vancouver',
    country: 'Canada'
  },
  {
    name: 'Sarah',
    movie_rating: 5,
    city: 'Frankfurt',
    country: 'Germany'
  }
]

const columns: ReactStyledTableColumn[] = [
  {
    label: 'Name',
    value: 'name',
    sortable: true
  },
  {
    label: 'Rating',
    value: 'movie_rating',
    render: (value: ReactStyledTableDataItemValue) => {
      return (
        <>
          {[...Array(value)].map((_val, idx) => (
            <span style={{ color: '#ffa500' }} key={idx}>
              &#9733;
            </span>
          ))}
        </>
      )
    }
  },
  {
    label: 'City',
    value: 'city'
  },
  {
    label: 'Country',
    value: 'country',
    tableCellComponent: BlueTableCell
  }
]}

const App = () => {
  return (
    <>
      <Table data={data} columns={data_columns} tableCell={GreenTableCell} />
      <CustomTable data={data} columns={columns} />
    </>
  )
}

API

Props

Name Type Required Description
data Object[] true Data record array to be rendered
columns ReactStyledTableColumn[] true Columns config see possible config values below
tableCell StyledComponent<'td', any, {}, never> false Custom styled table cell <td> component that will replace all table cells in <tbody>. If column config has tableCellComponent defined then table cell will be replaced with it instead

Column Props

Name Type Required Description
value string true Key in the data record
label string true Label that will be displayed in table header
sortable boolean false Enables data to be sorted by this column's values
tableCellComponent StyledComponent<'td', any, {}, never>; false Custom styled table cell <td> component that will replace all table cells in the column. Has higher precedence then tableCell prop on Table component
render (value: ReactStyledTableDataItemValue) => ReactStyledTableDataItemValue | JSX.Element; false Replaces data value with the returned value for the column. This values is rendered inside table cell <td> if you want to replace table cell itself then use tableCellComponent

License

MIT © alarivan