Table

This is the <Table /> component.

---

Examples

Basic table

import Table from '@candy/kitkat/table'

const columns = [
  {
    Header: 'First Name',
    accessor: 'firstName',
  },
  {
    Header: 'Last Name',
    accessor: 'lastName',
    width: '250px',
  },
]

const data = [
  {
    "firstName": "John",
    "lastName": "Doe"
  },
  {
    "firstName": "veruLooooooongFirrrstNaaaaaaaameeeeee",
    "lastName": "Last name 2"
  }
]

<Table columns={columns} data={basicData} />

First Name	Last Name
John	Doe
veruLooooooongFirrrstNaaaaaaaameeeeee	Last name 2

---

Columns options

Check react-table docs

The accessor is the string/function used to build the data model for your column.

Example

If you have your array of rows with this structure

const data = [
  {
    prop1: { prop2: { points: 1 } },
  },
]

The accessor with prop1.prop2.points and will return 1

Width and textAlign

Beside react-table props, you can pass your own properties.

Custom properties created

• width: string - will limit the widht of the column
• textAlign: 'left' | right - Aling text default is left

---

Custom Cells

For special cell format you can create custom cells components that can be specified in the column definition.

How to access data

In the cell component properties you have acccess to the following objects:

{
  cell, row, column
}

The value from the accesor is in the cell.value

The entire row object is in the row.original

Extra column properties (from columns definition) column.customProperty

DateCell Example

The component will take a string Date and return a red US date.

const DateCell = ({
  cell: { value },
}: CellProps<{ value: string }>): JSX.Element => {
  const date = new Date(value)

  return <Text color="red">{date.toLocaleDateString('en-US')}</Text>
}

const columns = [
  {
    Header: 'List Date',
    Cell: DateCell,
    accessor: 'createdAt',
  },
]

Name	Price	List Date	Edition #
STUFFING BUG: 2022 MLB ICON Leadoff Series - Lineup 1 Pack	$100,000.00	6/24/2022	726
STUFFING BUG: 2022 MLB ICON Leadoff Series - Lineup 1 Pack	$222.00	6/24/2022	1054
STUFFING BUG: 2022 MLB ICON Leadoff Series - Lineup 1 Pack	$444.00	6/24/2022	836
STUFFING BUG: 2022 MLB ICON Leadoff Series - Lineup 1 Pack	$44,432.00	6/24/2022	1004
STUFFING BUG: 2022 MLB ICON Leadoff Series - Lineup 1 Pack	$100.00	6/24/2022	1015
STUFFING BUG: 2022 MLB ICON Leadoff Series - Lineup 1 Pack	$22.00	6/24/2022	364

---

Hidden columns

There are some cases when some columns must be hidden. This can be specifed with in the hiddenColumns property. Columns must have the id property defined.

Example - Hide some columns based on the screen resolution.

const { isExtraSmall, isSmall } = useScreenSize()
const hiddenColumns = isExtraSmall || isSmall ? ['name'] : []

<Table columns={columns} data={listings} hiddenColumns={hiddenColumns} />

Price	List Date	Edition #
$100,000.00	6/24/2022	726
$222.00	6/24/2022	1054
$444.00	6/24/2022	836
$44,432.00	6/24/2022	1004
$100.00	6/24/2022	1015
$22.00	6/24/2022	364

---

Pagination

Use <Pagination /> component

Props

Name	Type	Default	Description
className?	string	''	Css class name
colorScheme	'light' | 'dark'	dark	Color Scheme
columns	any[]		Array with the column definitions
data	any[]		Array of the data
hiddenColumns?	string[]	[]	Array with string ids of the hidden columns
noDataPlaceholder?	ReactNode	null	Placeholder element when there data is an empty array
onRowClick?	((row: any) => void) | null	null	Callback function on row click