https://github.com/habx/ui-table

🧮 UI Components for Table
https://github.com/habx/ui-table

react react-table

Last synced: 4 months ago
JSON representation

🧮 UI Components for Table

• Host: GitHub
• URL: https://github.com/habx/ui-table
• Owner: habx
• License: mit
• Created: 2020-01-02T09:13:28.000Z (about 6 years ago)
• Default Branch: dev
• Last Pushed: 2023-01-07T13:49:19.000Z (about 3 years ago)
• Last Synced: 2025-09-11T19:49:33.177Z (5 months ago)
• Topics: react, react-table
• Language: TypeScript
• Homepage: https://habx.github.io/ui-table/
• Size: 55.7 MB
• Stars: 33
• Watchers: 2
• Forks: 4
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          



  

    

  



@habx/ui-table


# React Table UI

[![CircleCI](https://img.shields.io/circleci/build/github/habx/ui-table)](https://app.circleci.com/pipelines/github/habx/ui-table)

[![Version](https://img.shields.io/npm/v/@habx/ui-table)](https://www.npmjs.com/package/@habx/ui-table)

[![Size](https://img.shields.io/bundlephobia/min/@habx/ui-table)](https://bundlephobia.com/result?p=@habx/ui-table)

[![License](https://img.shields.io/github/license/habx/ui-table)](/LICENSE)

UI components for [react-table](https://github.com/tannerlinsley/react-table) based on [ui-core](https://github.com/habx/ui-core)

![Preview-light](https://res.cloudinary.com/habx/image/upload/v1616506914/tech/ui-table/table-light.png)

![Preview-dark](https://res.cloudinary.com/habx/image/upload/v1616506987/tech/ui-table/table-dark.png)

## Installation

```shell 

npm i @habx/ui-table

 ```

## Features

* Fixed headers

* React table built in plugins

* Infinite scroll

* Import/export

Test all our components in our [Storybook](https://habx.github.io/ui-table/)

### Basic usage

````typescript jsx

  const tableInstance = useTable({

    data: FAKE_DATA,

    columns: BASIC_COLUMNS,

  })

  return (

    

      

    

  )

````

### Import / Export

Import and export your data in `.xlsx` or `.csv` thanks to [exceljs](https://github.com/exceljs/exceljs)

![Preview-imex](https://res.cloudinary.com/habx/image/upload/v1616507243/tech/ui-table/imex.gif)

#### Columns Example

```typescript jsx

export const IMEX_COLUMNS = [

  {

    Header: 'Email',

    accessor: 'email',

    meta: {

      imex: {

        type: 'string' as const,

      },

    },

  },

  {

    Header: 'Age',

    accessor: 'age',

    meta: {

      imex: {

        type: 'number' as const,

      },

    },

  },

]

```

#### Export

````typescript jsx

  const tableInstance = useTable({

    data,

    columns,

  })

  const [downloadTableData] = useExportTable({

    data: FAKE_DATA,

    columns: IMEX_COLUMNS,

  })

````

#### Import

````typescript jsx

    const tableInstance = useTable({

      data,

      columns,

    })

    const upsertRow = () => new Promise((resolve) => setTimeout(resolve, 1000))

    const importTable = useImportTable({

      columns,

      upsertRow: upsertRow,

      getOriginalData: () => data,

    })

    return (

        

          

            

              Import

            

          

          

        

    )

````