@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
`

$3

#### useData
`javascript
// useData.js
import { useMemo } from 'react'

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

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

export default function useColumns() {
return useMemo(() => [
{
Header: 'Name',
Cell: cellInfo => ,
accessor: 'name',
Filter: DefaultFilter,
canSort: true
},
{
Header: 'State',
Cell: cellInfo => ,
accessor: 'state',
Filter: SelectFilter,
filter: 'includes',
},
}), [])
}
`

#### useActions

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

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

#### Index

`javascript
// 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 (



)
}
`

Built-In Components

$3

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

$3

To be used in useColumns.

`javascript
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.

$3

To be used in useColumns.

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

$3

To be used when making api requests.

`javascript
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 (

)
}
``