@wedgekit/grid

Purpose

@wedgekit/grid is the current Wedgekit solution for tabular data

NOTE: @wedgekit/grid is overdue for a major API overhaul. As such we do not recommend implementing new grids until this is done.

Usage

import styled from 'styled-components';

import Grid from '@wedgekit/grid';

const Wrapper = styled.div`
  height: 200px;
`;

const Example = () => {
  const columns = [
    {
      columnGUID: 0,
      dataType: 'integer',
      label: 'Year',
      name: 'year',
    },
    {
      columnGUID: 1,
      dataType: 'character',
      label: 'Title',
      name: 'title',
    },
    {
      columnGUID: 2,
      dataType: 'character',
      label: 'Author',
      name: 'author',
    },
  ];

  const data = [
    {
      year: 2000,
      title: 'A Deepness in the Sky',
      author: 'Vernor Vinge',
    },
    {
      year: 2001,
      title: 'Harry Potter and the Goblet of Fire',
      author: 'J.K. Rowling',
    },
    {
      year: 2002,
      title: 'American Gods',
      author: 'Neil Gaiman',
    },
    {
      year: 2003,
      title: 'Hominids',
      author: 'Robert J. Sawyer',
    },
    {
      year: 2004,
      title: 'Paladin of Souls',
      author: 'Lois McMaster Bujold',
    },
    {
      year: 2005,
      title: 'Jonathan Strange & Mr Norrell',
      author: 'Susanna Clarke',
    },
    {
      year: 2006,
      title: 'Spin',
      author: 'Robert Charles Wilson',
    },
    {
      year: 2007,
      title: 'Rainbows End',
      author: 'Vernor Vinge',
    },
    {
      year: 2008,
      title: "The Yiddish Policemen's Union",
      author: 'Michael Chabon',
    },
    {
      year: 2009,
      title: 'The Graveyard Book',
      author: 'Neil Gaiman',
    },
    {
      year: 2010,
      title: 'The Windup Girl',
      author: 'Paolo Bacigalupi',
    },
    {
      year: 2010,
      title: 'The City & The City',
      author: 'China Miéville',
    },
    {
      year: 2011,
      title: 'Blackout/All Clear',
      author: 'Connie Willis',
    },
    {
      year: 2012,
      title: 'Among Others',
      author: 'Jo Walton',
    },
    {
      year: 2013,
      title: 'Redshirts',
      author: 'John Scalzi',
    },
    {
      year: 2014,
      title: 'Ancillary Justice',
      author: 'Ann Leckie',
    },
    {
      year: 2015,
      title: 'The Three-Body Problem',
      author: 'Cixin Liu/Ken Liu',
    },
    {
      year: 2016,
      title: 'The Fifth Season',
      author: 'N.K. Jemisin',
    },
    {
      year: 2017,
      title: 'The Obelisk Gate',
      author: 'N.K. Jemisin',
    },
    {
      year: 2018,
      title: 'The Stone Sky',
      author: 'N.K. Jemisin',
    },
    {
      year: 2019,
      title: 'The Calculating Stars',
      author: 'Becky Chambers',
    },
    {
      year: 2020,
      title: 'A Memory Called Empire',
      author: 'Arkady Martine',
    },
  ];

  return (
    <Wrapper>
      <Grid columns={columns} rows={data} />
    </Wrapper>
  );
};

render(<Example />);

Props

columns

type Column = {
  columnGUID: string | number;
  dataType: 'character' | 'date' | 'integer' | 'decimal';
  label: string;
  name: string;
};

Type: Column[]

Required: ✅

rows

Type: Record<valueof Column['name'], Column['name']>

Required: ✅