@dokspot/table-component

@dokspot/table-component

Based on react-table and react-bootstrap, this component generates a standard table. The component can be explored through its storybook.

Installation

yarn add @dokspot/table-component

Getting started

We leverage react-table package and therefore follow the similar input, using useMemo.

To create a table we will need three elements:

• Data via useData
• Columns via useColumns
• Actions via useActions

The three elements should implement useMemo from react. We suggest organising the following structure for your table (example is a products table):

- /products
  - /hooks
    - useData.js
    - useColumns.js
    - useActions.js
  - Index.js

Skeleton files

useData

// useData.js
import { useMemo } from 'react'

export default function useData() {
  return useMemo(() => [
    {
      name: 'Product A',
      state: 'public'
    },
    {
      name: 'Product B',
      state: 'private'
    }
  }), [])
}

useColumns

// useColumns.js
import { useMemo } from 'react'
import { TextCell } from '@dokspot/table-component'

export default function useColumns() {
  return useMemo(() => [
    {
      Header: 'Name',
      Cell: cellInfo => <TextCell loading={false} text={cellInfo.value} />,
      accessor: 'name',
      Filter: DefaultFilter,
      canSort: true
    },
    {
      Header: 'State',
      Cell: cellInfo => <TextCell loading={false} text={cellInfo.value} />,
      accessor: 'state',
      Filter: SelectFilter,
      filter: 'includes',
    },
  }), [])
}

useActions

// useActions.js
import { useMemo } from "react"

export default function useActions() {
  return useMemo(() => [
    {
      name: 'Action 1',
      action: () => {},
      defaults: {}
    },
    {
      name: 'Action 2',
      action: () => {},
      defaults: {}
    }
  ], [])
}

Index

// Index.js
import { TableComponent } from '@dokspot/table-component'
import useData from './hooks/useData'
import useColumns from './hooks/useColumns'
import useActions from './hooks/useActions'

export default function Index() {
  return (
    <div className='style-me'>
      <TableComponent useData={useData} useColumns={useColumns} useActions={useActions} />
    </div>
  )
}

Built-In Components

TableComponent

import { TableComponent } from '@dokspot/table-component'

Cells

To be used in useColumns.

import { Cell } from '@dokspot/table-component'
import { TextCell } from '@dokspot/table-component'
import { BadgeCell } from '@dokspot/table-component'
import { TooltipCell } from '@dokspot/table-component'

NOTE: Any custom Cell should be wrapped by Cell.

Filters

To be used in useColumns.

import { DefaultFilter } from '@dokspot/table-component'
import { GlobalFilter } from '@dokspot/table-component'
import { SelectFilter } from '@dokspot/table-component'

Hooks

To be used when making api requests.

import { useAPI } from '@dokspot/table-component'

API_ENDPOINT = '/api/products'

function useData(input) {
  const output = useMemo(() => {
    input.map(data => ({
      ...data,
      // preprocess data if required
    }))
  })
  return output
}

export default function Index() {
  const [data, isLoading] = useApi(API_ENDPOINT)

  return (
    <TableComponent loading={isLoading} useData={useData(data)} ...>
  )
}