poly-table v0.1.0

poly-table

Opinionated, flexible reactjs table component

Install

npm install --save poly-table

Usage

• Using the useTable hook.

import * as React from 'react'
import Header from './components/header'
import Footer from './components/footer'
import useTable from 'poly-table'
import type { ColumnProps } from 'poly-table/dist/v1/types'

const data = {
  entityData: [
    {
      id: 1,
      name: 'Entity 1'
    }
  ],
  total: 2
}

const Example = () => {
  const cols: ColumnProps[] = [
    {
      name: 'Entity Name',
      rows: [],
      type: 'only-text',
      accessor: 'name'
    },
    {
      name: 'Created At',
      rows: [],
      type: 'only-text',
      accessor: 'name'
    }
  ]

  const { paginationData,headerData } = useTable({
    cols: cols,
    limit: 1,
    skip: 0, // this could be undefined ... It defauls to 0 anyways
    total: data?.total
  })

  return (
    <React.Fragment>
      <div className={'container'}>
        <table>
          <TableHead cols={headerData} />
        </table>
        <Footer total={data?.total} paginationData={paginationData} />
      </div>
    </React.Fragment>
  )
}

• Using the Already Designed Table Component.

import * as React from 'react'
import { Table } from 'poly-table'
import type { ColumnProps } from 'poly-table/dist/v1/types'

const data = {
  entityData: [
    {
      id: 1,
      name: 'Entity 1',
      createdAt: new Date()
    },
    {
      id: 2,
      name: 'Entity 1',
      createdAt: new Date()
    }
  ],
  total: 2
}

const Example = () => {
  const cols: ColumnProps[] = [
    {
      name: 'Entity Name',
      rows: [
        {
          type: 'text',
          accessor: ['name'],
          bold: true
        }
      ],
      type: 'only-text',
      headerStyle: {
        align: 'center',
        flex: 2
      },
      accessor: 'name'
    },
    {
      name: 'Created At',
      rows: [
        {
          type: 'date',
          accessor: ['createdAt'],
          format: 'PPPpp'
        }
      ],
      headerStyle: {
        align: 'center'
      },
      type: 'date-time',
      accessor: 'name'
    }
  ]

  return (
    <React.Fragment>
      <div className={'container'}>
        <Table
          limit={1}
          cols={cols}
          total={data?.total}
          data={data?.entityData}
        />
      </div>
    </React.Fragment>
  )
}

Features

• Typescript Support
• Headless implementation (UI Components can be fully customized)
• Pagination Support
• Example built with tailwind ui

License

MIT © Bendomey