React table component
npm install @dokspot/table-component


Based on react-table and react-bootstrap, this component generates a standard table. The component can be explored through its storybook.
yarn add @dokspot/table-component
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
#### 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 (
)
}
``