simple-tables-react

Lightweight simple react table library that will provide easy api and will keep your component clean.

Install

npm install --save simple-tables-react

Basic Usage

import React from 'react'
import { Table, Options } from 'simple-react-table'

const options: Options<Employee> = {
  cellOptions: {
    name: { displayName: 'First name' },
    emp_number: { displayName: 'Employee number' },
    position: { displayName: 'Position' },
    years: { displayName: 'Experience' }
  }
}

class Example extends Component {
  [responseData] = useApi<Employee[]>()

  render() {
    return <Table data={responseData} options={options} />
  }
}

Custom cells

You can wrap your data with wrappers to create custom table cells.

import React from 'react'
import { Options, Table } from 'simple-react-table'
import { employees } from '../___mock__'
import { Employee } from '../models'

const wrapToLink = (value: any, entry: Employee) => {
  return <a href={`somelink/${entry.uuid}`}>{value}</a>
}

const options: Options<Employee> = {
  cellOptions: {
    name: { displayName: 'First name', wrapper: wrapToLink },
    height: { displayName: 'Height' },
    age: { displayName: 'Age' }
  }
}

export const WithLink = () => {
  return <Table data={employees} options={options} />
}

Deep nested data structure

You can have an array of nested objects and access properties with dot notation referencing

import React from 'react'
import { Options, Table } from 'simple-react-table'
import { managers } from '../___mock__'
import { Manager } from '../models'

const options: Options<Manager> = {
  cellOptions: {
    name: { displayName: 'First name' },
    'position.name': { displayName: 'Position' },
    'position.team.name': { displayName: 'Type of team' },
    num_exp: { displayName: 'Experience' }
  }
}

export const WithNestedObject = () => {
  return <Table data={managers} options={options} />
}

Styling

This component will do minimum for styling giving the user flexibility to style. Current styles in the package are:

.srt-wrapper th {
  position: sticky;
  top: 0;
  background-color: white;
}

.srt-wrapper {
  overflow-y: auto;
}

Note that sticky header might not work in some browser like IE.

You can override styles by adding .srt selector before the current selector. For example:

.srt .srt-wrapper th {
  background-color: lightsalmon;
}

Another option can be creating custom wrapper with your styles.

More examples

here

License

MIT License

Keywords

table, react, typescript