1.0.2 • Published 5 years ago

@alarivan/react-styled-table v1.0.2

Weekly downloads
3
License
MIT
Repository
github
Last release
5 years ago

@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

NameTypeRequiredDescription
dataObject[]trueData record array to be rendered
columnsReactStyledTableColumn[]trueColumns config see possible config values below
tableCellStyledComponent<'td', any, {}, never>falseCustom 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

NameTypeRequiredDescription
valuestringtrueKey in the data record
labelstringtrueLabel that will be displayed in table header
sortablebooleanfalseEnables data to be sorted by this column's values
tableCellComponentStyledComponent<'td', any, {}, never>;falseCustom 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;falseReplaces 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