Out-of-the-box UI for React-Table 7.
npm install 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
---
1. Install the dependency
``bash`
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.
1. 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.
`tsx
/* 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
return (
data={data}
tableInstanceRef={tableInstanceRef}
/>
)
}
`
JavaScript (Basic example)
`jsx
/* 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(null)
return (
data={data}
tableInstanceRef={tableInstanceRef}
/>
)
}
``
All options and properties available for ReactTableUI component are listed here.
- Blog
MIT © GuptaSiddhant