https://github.com/wrathchaos/react-native-premium-table
Fully customizable, easy to use premium table for React Native
https://github.com/wrathchaos/react-native-premium-table
premium react react-native
Last synced: 3 months ago
JSON representation
Fully customizable, easy to use premium table for React Native
- Host: GitHub
- URL: https://github.com/wrathchaos/react-native-premium-table
- Owner: WrathChaos
- Created: 2022-03-19T21:06:38.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2022-10-01T19:48:16.000Z (about 3 years ago)
- Last Synced: 2025-05-13T03:59:32.292Z (5 months ago)
- Topics: premium, react, react-native
- Language: Java
- Homepage: https://freakycoder.com
- Size: 1.68 MB
- Stars: 12
- Watchers: 2
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://github.com/WrathChaos/react-native-premium-table)
[](https://github.com/WrathChaos/react-native-premium-table)
[](https://www.npmjs.com/package/react-native-premium-table)
[](https://www.npmjs.com/package/react-native-premium-table)
[](https://opensource.org/licenses/MIT)
[](https://github.com/prettier/prettier)
# Installation
Add the dependency:
```bash
npm i react-native-premium-table
```
## Peer Dependencies
IMPORTANT! You need install them
```js
"react-native-easy-grid": ">= 0.2.2"
```
# Usage
## Import
```jsx
import PremiumTable, { Item } from "react-native-premium-table";
```
## Fundamental Usage
```jsx
```
## Data Format
```js
const mockData = [
{
name: "Data Sync",
isBasic: true,
isPremium: true,
},
{
name: "Offline Usage",
isBasic: true,
isPremium: true,
},
{
name: "Share with Friends",
isBasic: true,
isPremium: true,
},
{
name: "Unlimited Items",
isBasic: false,
isPremium: true,
},
{
name: "Unlimited Lists",
isBasic: false,
isPremium: true,
},
{
name: "Insight",
isBasic: false,
isPremium: true,
},
{
name: "Custom App Icons",
isBasic: false,
isPremium: true,
},
{
name: "Historical Access",
isBasic: false,
isPremium: true,
},
{
name: "Priority Support",
isBasic: false,
isPremium: true,
},
];
```
## Example Project 😍
You can checkout the example project 🥰
Simply run
- `npm i`
- `react-native run-ios/android`
should work of the example project.
# Configuration - Props
## Fundamentals
| Property | Type | Default | Description |
| -------- | :----: | :-------: | ---------------------- |
| data | Item[] | undefined | set the formatted data |
## Customization (Optionals)
| Property | Type | Default | Description |
| ---------------- | :-----------------: | :-------: | --------------------------------------------------------- |
| style | ViewStyle | default | set or override the style object for the `main container` |
| headerStyle | ViewStyle | default | set or override the style object for the `header` |
| basicText | string | "Basic" | change the basic column's text |
| premiumText | string | "Premium" | change the premium column's text |
| checkCircleStyle | ViewStyle | default | set or override the style object for the `check` circle |
| iconImageStyle | ImageStyle | default | set or override the style object for the `icon` image |
| titleTextStyle | TextStyle | default | set or override the style object for the `title` text |
| itemTextStyle | TextStyle | default | set or override the style object for the `item` text |
| checkImageSource | ImageSourcePropType | default | set your own `check` image |
| lockImageSource | ImageSourcePropType | default | set your own `lock` image |
## Future Plans
- [x] ~~LICENSE~~
- [ ] Write an article about the lib on Medium
## Author
FreakyCoder, kurayogun@gmail.com
## License
React Native Premium Table is available under the MIT license. See the LICENSE file for more info.