Package Exports

react-table-ui

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-table-ui) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React-Table UI

Out-of-the-box UI for React-Table 7.

Customisable UI with custom theme and components.
Build with Typescript. Extends community types for React-Table.
Supports accessibility and keyboard interaction.
Allows all native React-Table configurations and extends on it.

The project is dedicated to the awesome work done at React-Table by Tanner Linsley as it wouldn't have been possible without his great library. I have personally use the library and wanted to contribute back to it somehow.

RTUI

Get started

Install

Install the dependency
```
npm install react-table-ui
---
yarn add react-table-ui
```
The package size for production usage (with styles and without types) is ~36 KB (unzipped). The ~200 KB size of the complete package contains helpful TypeScript typings that makes using React-Table-UI a bliss.
For Typescript support, add react-table-config.d.ts file to your source (src) folder, if not added automatically.
- [Preferred] Copy the file from your project's node_modules - ./node_modules/react-table-ui/dist/react-table-config.d.ts to your source folder.
- [Fallback] Get the file from GitHub. It may not match the exact version of library that you are using.

Usage

/** React Table UI - Basic example (TypeScript) */

import ReactTableUI from 'react-table-ui'
import { useMemo, useRef } from 'react'
import type { TableInstance, DataType } from 'react-table-ui'

/** Structure of data provided foe each row. */
interface User extends DataType {
  name: string
  age: number
}

const App = () => {
  // Provide data for the table
  const data: User[] = useMemo(
    () => [
      { name: 'Abc Xyx', age: 20 },
      { name: 'Def Uvw', age: 25 },
      { name: 'Ghi Rst', age: 23 },
      { name: 'Jklm Nopq', age: 30 }
    ],
    []
  )

  // Create an instance ref that will hold the reference to React Table instance.
  const tableInstanceRef = useRef<TableInstance<User>>()

  return (
    <ReactTableUI
      title='My Table'
      data={data}
      tableInstanceRef={tableInstanceRef}
    />
  )
}

JavaScript (Basic example)

/** React Table UI - Basic example (JavaScript) */

import ReactTableUI from 'react-table-ui'
import { useMemo, useRef } from 'react'

const App = () => {
  // Provide data for the table
  const data = useMemo(
    () => [
      { name: 'Abc Xyx', age: 20 },
      { name: 'Def Uvw', age: 25 },
      { name: 'Ghi Rst', age: 23 },
      { name: 'Jklm Nopq', age: 30 }
    ],
    []
  )

  // Create an instance ref that will hold the reference to React Table instance.
  const tableInstanceRef = useRef()

  return (
    <ReactTableUI
      title='My Table'
      data={data}
      tableInstanceRef={tableInstanceRef}
    />
  )
}

API Documentation

All options and properties available for ReactTableUI component are listed here.

Examples

Server pagination

react-table-ui