Turntable

Simple, extendable data table focused on performance

Installation

Turntable can be installed with npm

npm install @flatfile/turntable

or yarn

yarn add @flatfile/turntable

Usage

const columns = [
  { value: 'Name' },
  { value: 'Phone' },
  { value: 'City' },
  { value: 'State' },
]

const rows = [
  {
    cells: [
      { value: 'Julianne Littel' },
      { value: '189-242-5961' },
      { value: 'South Sventown' },
      { value: 'Idaho' },
    ],
    position: 0,
    rowIndex: 1,
  },
  {
    cells: [
      { value: 'Adela Skiles' },
      { value: '582-187-2342' },
      { value: 'East Keegan' },
      { value: 'Delaware' },
    ],
    position: 1,
    rowIndex: 2,
  },
  {
    cells: [
      { value: 'Naomie Dach' },
      { value: '766-231-5964' },
      { value: 'Port Mackville' },
      { value: 'Missouri' },
    ],
    position: 2,
    rowIndex: 3,
  },
  {
    cells: [
      { value: 'Dr. Corine Hirthe' },
      { value: '327-913-2735' },
      { value: 'Lake Freder' },
      { value: 'Alabama' },
    ],
    position: 3,
    rowIndex: 4,
  },
]

;<Table
  columnConfig={columns}
  count={4}
  initData={rows}
  visibleRows={4}
  rowHeight={40}
/>

Developing locally

The app development environment can be started via one of two ways: NPM or Docker. Docker offers the additional ability to test package distributions locally.

Using NPM

Starting the app locally: npm run start

Watch types: npm run type-check:watch

Testing the app: npm run test

Starting Storybook: npm run storybook

Building: npm run build

Using Docker

Starting the app: docker-compose up dev

Testing the app: docker-compose run --rm dev npm run test

Watch types: docker-compose run --rm dev npm run type-check:watch

Starting Storybook: docker-compose up storybook

Test package in sandbox: docker-compose up pack

Versioning & Publishing Packages

Warning

Do NOT publish packages manually from your local environment. This will confuse the automation and make sadness.

Package publishing is automated through changeset and github workflows. To instigate publication:

1. Make a change to a package
2. Run npm run changeset, choose the package(s) that were modified, and follow instructions to fill out changelog details
3. Push the resulting .changeset file along with the package changes from the first step
4. Create PR with these changes and merge into main

This will trigger a github action to create a new PR with the increased version and changelog. Once this PR gets merged, CI runs again and releases the package(s) to npm.