# react-native-fancy-table

> react native responsive,scrollable data table

Latest version **0.1.7** (published 2023-11-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-fancy-table
pnpm add react-native-fancy-table
yarn add react-native-fancy-table
bun add react-native-fancy-table
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.7 |
| Published | 2023-11-15 |
| First published | 2023-09-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >= 16.0.0 |
| Dependencies | 0 |
| Unpacked size | 27.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Alauddin Ahmed |
| Maintainers | itsaladin |
| Keywords | react-native, ios, android, data, table, responsive, scrollable, react, datatable, data table, render-props, control-props, downshift, react-native-cell, react-native-table, react-native-table-component, react-native-responsive-table, react-native-dynamic-table, react-native-scrollable-table, react-native-scrollview-table, react-native-data-table |

## Links

- npm: https://www.npmjs.com/package/react-native-fancy-table
- Repository: https://github.com/itsaladin/react-native-fancy-table
- Homepage: https://github.com/itsaladin/react-native-fancy-table#readme
- Issues: https://github.com/itsaladin/react-native-fancy-table/issues
- npm.io page: https://npm.io/package/react-native-fancy-table

## 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

- 0.1.7 (latest) — 2023-11-15
- 0.1.6 — 2023-09-17
- 0.1.5 — 2023-09-10
- 0.1.4 — 2023-09-10
- 0.1.3 — 2023-09-09
- 0.1.2 — 2023-09-09
- 0.1.1 — 2023-09-09
- 0.1.0 — 2023-09-09

## README

# react-native-fancy-table

React Native Scrollable,Dynamic, Responsive Data table view horizontal and vertical.:point_left::point_left::point_left::point_left::sparkling_heart::sparkling_heart::sparkling_heart: :v::v::v:

| ![Screenshot a](screenshots/a.png) | ![Screenshot b](screenshots/b.png) | ![Screenshot c](screenshots/c.png) |
| ---------------------------------- | ---------------------------------- | ---------------------------------- |

## Installation

Using Yarn:

```sh
yarn add react-native-fancy-table
```

```sh
npm install react-native-fancy-table
```

## Usage

```js
import * as React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import FancyTable from 'react-native-fancy-table';

export default function App() {
  const header = [
    ' id',
    'Roll No',
    'Order Qty',
    'Line Input',
    'Line Balalance',
    'Production',
    'Sample',
    'Killed',
    'Missing',
    'Buy Date',
    'Ship Date',
    'Proto No',
    'Set Code',
    'Destination Place',
    'Delivery Place',
    'Item Number',
  ];
  const tableBody = [
    {
      id: 1,
      RollNo: '1',
      Pdm_ItemCode: '2442010',
      description: ' BUET',
      LotNo: 'N23060829',
      UOM: 'YDS',
      RollQty: 55,
      RollWidth: '153cm',
      RollColor: 'DKT N07A BLACK',
      RollShrinkageWarp: '',
      RollshrinkageWeft: '',
      SupplierId: 380,
      supplier: '',
      ItemId: 0,
      item: 'Fabric',
      consignment: '3333',
    },
    {
      id: 1,
      RollNo: '1',
      Pdm_ItemCode: '2442010',
      description: ' BUET',
      LotNo: 'N23060829',
      UOM: 'YDS',
      RollQty: 55,
      RollWidth: '153cm',
      RollColor: 'DKT N07A BLACK',
      RollShrinkageWarp: '',
      RollshrinkageWeft: '',
      SupplierId: 380,
      supplier: '',
      ItemId: 0,
      item: 'Fabric',
      consignment: '3333',
    },
  ];

  return (
    <>
      <FancyTable
        headerBGColor="silver"
        headerFontColor="white"
        headerFontSize={15}
        bodyFontSize={13}
        bodyFontColor="black"
        tableHeight={1.4}
        header={header}
        tableBody={tableBody}
        rowWidth={4}
        borderColor="gray"
        borderWidth={1}
      />
    </>
  );
}
```

## Properties
| Prop              | Type  | Description | Default |
|---|---|---|---|
| <b>header</b>     | Array[] | Table header you could use array data as single string. | `null` |
| <b>tableBody</b>  | Array[] | Table data you could use as array of object, key value pare. | `null` |
| <b>headerBGColor</b>      | String | Header background color | `white` |
| <b>headerFontColor</b>| String| Table header font color. | `black` |
| <b>headerFontSize</b>  | Number | header font size. | `16` |
| <b>bodyFontSize</b>    | Number | Body font size. | `14` |
| <b>bodyFontColor</b>   | String | Body font color.| `[]` |
| <b>tableHeight</b>  | Number | Reverse table height resizer. | `4` |
| <b>rowWidth</b>   | Number   | Increment row with by reverse order   |   4  |
| <b>borderColor</b> | String | Table border color | `gray` |
| <b>borderWidth</b> | Number | Table border width | `1` |

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT

---

Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)

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