https://github.com/itsaladin/react-native-fancy-table
React Native Table NPM Package
https://github.com/itsaladin/react-native-fancy-table
react-native react-native-fancy-table react-native-table
Last synced: 3 months ago
JSON representation
React Native Table NPM Package
- Host: GitHub
- URL: https://github.com/itsaladin/react-native-fancy-table
- Owner: itsaladin
- License: mit
- Created: 2023-09-09T08:58:26.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-11-15T10:18:58.000Z (over 2 years ago)
- Last Synced: 2025-09-26T15:02:03.363Z (10 months ago)
- Topics: react-native, react-native-fancy-table, react-native-table
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-native-fancy-table
- Size: 699 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
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:
|  |  |  |
| ---------------------------------- | ---------------------------------- | ---------------------------------- |
## 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 (
<>
>
);
}
```
## Properties
| Prop | Type | Description | Default |
|---|---|---|---|
| header | Array[] | Table header you could use array data as single string. | `null` |
| tableBody | Array[] | Table data you could use as array of object, key value pare. | `null` |
| headerBGColor | String | Header background color | `white` |
| headerFontColor| String| Table header font color. | `black` |
| headerFontSize | Number | header font size. | `16` |
| bodyFontSize | Number | Body font size. | `14` |
| bodyFontColor | String | Body font color.| `[]` |
| tableHeight | Number | Reverse table height resizer. | `4` |
| rowWidth | Number | Increment row with by reverse order | 4 |
| borderColor | String | Table border color | `gray` |
| borderWidth | 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)