Filter Table

Usage

import { FilterTable } from '@wdzyi/ui';

<FilterTable
  label='Projects'
  columns={{ primary: 'Project', secondary: 'Focus', status: 'Status', note: 'Summary' }}
  groups={[
    { key: 'product', label: 'Products' },
    { key: 'concept', label: 'Concepts' },
  ]}
  rows={[
    {
      primary: 'Meridian Prediction',
      secondary: 'Onchain trading',
      status: { label: 'Live', tone: 'live' },
      group: 'product',
      note: 'Live prediction market platform.',
      href: '/work/meridian#prediction',
    },
  ]}
/>

Part of @wdzyi/ui. See setup to install it, or copy the code above.

Props

rowsFilterTableRow[]

Each has its primary text, then any of an icon, secondary text, a status, the group it’s under, a note and an href, which makes the whole row a link.

rows[].status{ label, tone }

Its tone is live, which breathes, positive, progress, negative, neutral or muted. Without a group, a row is under its status’s label.

groupsFilterTableGroup[]

The chips after All, each a key and a label. Without them, there’s a chip for each group the rows name.

columnsFilterTableColumns

The headers, if yours aren’t Name, Type, Status and Notes.

value, onChangestring, (key: string) => void

The chosen chip’s key, or all, if you want to hold it yourself, and what’s called when another is chosen.

allLabelstring = 'All'

The first chip, which shows every row.

labelstring = 'Table'

Names the table for screen readers.

Notes

• The foil is one strip, seen through a window over the chosen chip. The window glides and the foil stays, so it catches the light differently on each, and the type turns black exactly where the window is, even halfway between two.
• Rows fold by their grid rows rather than a measured height, so the rest close up as they go. Those coming back arrive top first, a beat apart.
• The chips are a radio group: Tab reaches the chosen one, and the arrows move and choose. A screen reader hears how many rows are left.
• Under 600px wide the last column goes, and under 440px the second tucks under the first, so it never has to scroll across.
• With reduced motion, the rows and the foil change without moving.