React Table DataTable

This project layers a UI on top of the every popular React Table library. The intention is to have a drop-in UI solution for most table use cases, while including simple options to override things like theming, sub-components, and actions.

Demo

Chromatic Storybook Demo

Usage

import { Column, DataTable, DataTableProps } from '@crossroadscx/datatable'

type Person: {
  firstName: string
  lastName: string
  email: string
  phone: string
}

type PersonData = Person & {
  subRows?: PersonData[]
}

const defaultPerson = {
  firstName: null,
  lastName: null,
  email: null,
  phone: null,
}

const data: Person[] = [
  { firstName: 'Bob', lastName: 'Dylan', email: '[email protected]', phone: '5555555' },
  { firstName: 'John', lastName: 'Cash', email: '[email protected]', '5555555' },
]

const columns: Column<PersonData>[] = [
  {
    Header: 'First Name',
    accessor: 'firstName',
  },
  {
    Header: 'Last Name',
    accessor: 'lastName',
  },
  {
    Header: 'Email',
    accessor: 'email,
  },
  {
    Header: 'Phone',
    accessor: 'phone',
  }
]

const handleChange = (data: Person[]) => {
  console.log('Table data changed')
  console.log(data)
}

React.render(<DataTable columns={columns} data={data} defaultItem={defaultPerson} />)

Props

| Name | Type | Required | Default | Description | | --- | --- | --- | --- | --- | | data | Array | Yes | - | The incoming data for the table. This borrows from react-table It should also be annotated with a typescript type as the generic is used throughout the table | | columns | Array | Yes | - | This type is the same structure required by react-table and determines the headers / accessors in the table | | handleChange | function | Yes | - | This handler is called any time the data in the table changes. This may include edits to a row data or row additions / deletions. | | defaultItem | Object | No | undefined | The default item object is used to add new rows to the table. This functionality will be disabled if defaultItem is not passed | | selectable | Boolean | No | false | This prop enables row selection via checkbox inputs in the table |

Styling

The default UI uses the TailwindCSS library for styling, and we use Styled Components as the styling implementation.

Future versions will allow individual style or entire theme overrides.

Development

Publish to NPM

1. yarn build - build the dist files
2. git add . git commit -m 'build dist' - Commit new dist files
3. npm version patch - create new patch version
4. git push - push new version to github
5. npm version publish - publish new version to NPM

License

@crossroadscx/datatable is released under the MIT license.