react-native-sticky-table v1.0.0

react-native-sticky-table

The Sticky Table library is built purely in JavaScript and uses React Native Reanimated to elevate the sticky table experience by enabling horizontal and vertical scrolling.

Our user-friendly and highly customizable library ensures a seamless experience. Whether you're an Android or iOS user, our library is compatible with both platforms, guaranteeing optimal performance.

🎬 Preview

Quick Access

Installation | Usage and Examples | Properties | Example | License

Getting Started 🔧

Here's how to get started with react-native-sticky-table in your React Native project:

Installation

1. Install the package

npm install react-native-sticky-table react-native-reanimated react-native-gesture-handler lodash

--- or ---

yarn add react-native-sticky-table react-native-reanimated react-native-gesture-handler lodash

2. Install cocoapods in the ios project

cd ios && pod install

Note: Make sure to add Reanimated's babel plugin to your babel.config.js

module.exports = {
      ...
      plugins: [
          ...
          'react-native-reanimated/plugin',
      ],
  };

Know more about react-native-reanimated, react-native-gesture-handler and lodash

Usage

Type of Data

const data = {
  titleData: Array<string>,
  tableData: Array<{
    data: Array<string>,
    maxWidth?: number
  }>
};

Sample Data

const data = {
  titleData: ['Property', 'The Cooper', 'ITC-S Tex Valuable'],
  tableData: [
    {
      maxWidth: 50,
      data: ['Type', 'Sell', 'IPO'],
    },
    {
      data: ['Total Price', '$1,025.00', '$4,20,500.00'],
    },
    {
      data: ['Quantity', '100', '2500'],
    },
    {
      data: ['High', '$1,325.00', '$4,22,513.00'],
    },
    {
      data: ['Low', '$1,005.00', '$4,00,513.00'],
    },
    {
      data: ['Market-Return', '21%', '40%'],
    },
    {
      data: ['Status', 'Active', 'Inactive'],
    },
  ],
};

Basic Example

import React from 'react';
import { SafeAreaView, StyleSheet } from 'react-native';
import { StickyTable } from 'react-native-sticky-table';

const App = () => {
  const data = {
    titleData: [
      'Property',
      'The Cooper',
      'ITC-S Tex Valuable',
      'The Wellesley',
      'Coil Tex Valuable',
      'The Westminster',
      'BLS-d Tex',
    ],
    tableData: [
      {
        data: ['Type', 'Sell', 'IPO', 'Buy', 'Sell', 'Sell', 'IPO'],
      },
      {
        data: [
          'Total Price',
          '$1,025.00',
          '$4,20,500.00',
          '$1,200.00',
          '$4,40,000.00',
          '$1,400.00',
          '$2,500.00',
        ],
      },
      {
        data: ['Quantity', '100', '2500', '3,00,000', '400', '50', '10'],
      },
      {
        data: [
          'High',
          '$1,325.00',
          '$4,22,513.00',
          '$1,212.00',
          '$4,41,110.00',
          '$1,445.00',
          '$2,535.00',
        ],
      },
      {
        data: [
          'Low',
          '$1,005.00',
          '$4,00,513.00',
          '$1,000.00',
          '$3,90,110.00',
          '$925.00',
          '$2,035.00',
        ],
      },
      {
        data: ['Market-Return', '21%', '40%', '2%', '34%', '1%', '90%'],
      },
      {
        data: [
          'Status',
          'Active',
          'Inactive',
          'Active',
          'Active',
          'Inactive',
          'Inactive',
        ],
      },
    ],
  };

  return (
    <SafeAreaView style={styles.screen}>
      <StickyTable
        data={data}
        rowTitleProps={{
          removeProperty: 'The',
          titleBackgroundColor: 'white',
        }}
      />
    </SafeAreaView>
  );
};

export default App;

const styles = StyleSheet.create({
  screen: {
    flex: 1,
  },
});

🎬 Preview

Properties

RowTitleProps

TableItemProps

Know more about ViewProps, ViewStyle, FlatListProps, TextProps, TextStyle

Example

A full working example project is here Example

yarn
yarn example ios   // For ios
yarn example android   // For Android

Find this library useful? ❤️

Support it by joining stargazers for this repository.⭐

Bugs / Feature requests / Feedbacks

For bugs, feature requests, and discussion please use GitHub Issues, GitHub New Feature, GitHub Feedback

🤝 How to Contribute

We'd love to have you improve this library or fix a problem 💪 Check out our Contributing Guide for ideas on contributing.

Awesome Mobile Libraries

• Check out our other available awesome mobile libraries

License

• MIT License