# react-chakra-ui-table

> React component for simple table make from React Table and Chakra UI

Latest version **1.0.1** (published 2021-10-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-chakra-ui-table
pnpm add react-chakra-ui-table
yarn add react-chakra-ui-table
bun add react-chakra-ui-table
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2021-10-05 |
| First published | 2021-10-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 16 |
| Unpacked size | 11.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | Chalermchon Samana |
| Maintainers | adaydesign |
| Keywords | react, table, component, chakra ui, react-table, simple table |

## Links

- npm: https://www.npmjs.com/package/react-chakra-ui-table
- Repository: https://github.com/adaydesign/react-chakra-ui-table
- Homepage: http://www.appcodemia.com
- Issues: https://github.com/adaydesign/react-chakra-ui-table/issues
- npm.io page: https://npm.io/package/react-chakra-ui-table

## Dependencies (16)

- [react](https://npm.io/package/react.md) ^17.0.2
- [react-dom](https://npm.io/package/react-dom.md) ^17.0.2
- [web-vitals](https://npm.io/package/web-vitals.md) ^1.0.1
- [react-icons](https://npm.io/package/react-icons.md) ^4.3.1
- [react-table](https://npm.io/package/react-table.md) ^7.7.0
- [react-select](https://npm.io/package/react-select.md) ^5.1.0
- [framer-motion](https://npm.io/package/framer-motion.md) ^4.1.17
- [react-scripts](https://npm.io/package/react-scripts.md) 4.0.3
- [@emotion/react](https://npm.io/package/@emotion/react.md) ^11.4.1
- [@babel/polyfill](https://npm.io/package/@babel/polyfill.md) ^7.12.1
- [@emotion/styled](https://npm.io/package/@emotion/styled.md) ^11.3.0
- [@chakra-ui/icons](https://npm.io/package/@chakra-ui/icons.md) ^1.0.15
- [@chakra-ui/react](https://npm.io/package/@chakra-ui/react.md) ^1.6.9
- [@testing-library/react](https://npm.io/package/@testing-library/react.md) ^11.1.0
- [@testing-library/jest-dom](https://npm.io/package/@testing-library/jest-dom.md) ^5.11.4
- [@testing-library/user-event](https://npm.io/package/@testing-library/user-event.md) ^12.1.10

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2021-10-05
- 1.0.0 — 2021-10-05

## README

# React ChakraUI Table

- npm : https://www.npmjs.com/package/react-chakra-ui-table

## Library
- React 17 (create by CRA)
- Chakra UI + Icons (main UI Library)
- React Table
- React Select
- React Icons

## Install

- install ChakraUI Library
- and install react-chakra-ui-table

```
npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4
npm i react-chakra-ui-table
```

## Example Code
- in App.js (don't use any .css files)

```
import { useState, useRef, useEffect } from 'react'
import { ChakraProvider,Text,Heading,Flex } from '@chakra-ui/react'
import { ChakraUITable } from 'react-chakra-ui-table'

// Example Table
const TodoListTable = () => {
  const columns = [
    {
      Header: '#',
      Cell: ({ row }) => (<Text>{row.index + 1}</Text>)
    },
    {
      Header: 'Name',
      accessor: 'name',
    },
    {
      Header: 'Title',
      accessor: 'title',
    },
    {
      Header: 'Completed',
      accessor: 'completed',
      Cell: ({ value }) => (value ? '✅' : '❌')
    },
  ]

  const [data, setData] = useState(null)

  const loadData = useRef()
  loadData.current = async () => {
    const urls = ['https://jsonplaceholder.typicode.com/users', 'https://jsonplaceholder.typicode.com/todos']
    try {
      const result = await Promise.all(
        urls.map(url => fetch(url).then(r => r.json()))
      )

      if (result.length === 2) {
        // index 0 is user
        // index 1 is todo
        const todoList = result[1].map(todo => {
          todo.user = result[0].find(i => i.id === todo.userId)
          todo.name = todo.user?.name
          return todo
        })

        setData(todoList)
      }
    } catch (error) {
      console.log(error)
    }
  }

  useEffect(() => {
    loadData.current()
  }, [])

  return (
    data && <ChakraUITable columns={columns} data={data} />
  )
}

const App = () => {
  return (
    <ChakraProvider>
      <Flex p={6} direction="column">
      <Heading mb={4}>Demo using React ChakraUI Table via Vite App</Heading>
      <TodoListTable />
      </Flex>
    </ChakraProvider>
  )
}

export default App
```

## Demo
- demo : https://demo-chakraui-table.netlify.app/

---
_Source: https://npm.io/package/react-chakra-ui-table · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._