@alarivan/react-styled-table

React table with styled-components

Demo

Demo

Install

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