{"id":18406325,"url":"https://github.com/simformsolutionspvtltd/react-native-sticky-table","last_synced_at":"2025-04-07T08:32:24.469Z","repository":{"id":214192252,"uuid":"728517898","full_name":"SimformSolutionsPvtLtd/react-native-sticky-table","owner":"SimformSolutionsPvtLtd","description":"React Native sticky table component to elevate the app's data presentation and visualization experience ✨","archived":false,"fork":false,"pushed_at":"2023-12-27T08:04:11.000Z","size":13199,"stargazers_count":43,"open_issues_count":2,"forks_count":1,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-22T15:22:50.773Z","etag":null,"topics":["android","component","ios","javascript","react-native","reanimated","sticky-table","table","tableview","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SimformSolutionsPvtLtd.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2023-12-07T05:31:48.000Z","updated_at":"2025-02-20T16:56:22.000Z","dependencies_parsed_at":"2023-12-26T16:02:48.358Z","dependency_job_id":"e9ba89e6-85f2-4e7e-a7b8-19d2e6230334","html_url":"https://github.com/SimformSolutionsPvtLtd/react-native-sticky-table","commit_stats":null,"previous_names":["simformsolutionspvtltd/react-native-sticky-table"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimformSolutionsPvtLtd%2Freact-native-sticky-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimformSolutionsPvtLtd%2Freact-native-sticky-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimformSolutionsPvtLtd%2Freact-native-sticky-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimformSolutionsPvtLtd%2Freact-native-sticky-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SimformSolutionsPvtLtd","download_url":"https://codeload.github.com/SimformSolutionsPvtLtd/react-native-sticky-table/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247620391,"owners_count":20968202,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","component","ios","javascript","react-native","reanimated","sticky-table","table","tableview","typescript"],"created_at":"2024-11-06T03:08:16.852Z","updated_at":"2025-04-07T08:32:21.209Z","avatar_url":"https://github.com/SimformSolutionsPvtLtd.png","language":"TypeScript","readme":"![StickyTable - Simform](./assets/react-native-sticky-table.gif)\n\n# react-native-sticky-table\n\n[![react-native-sticky-table on npm](https://img.shields.io/npm/v/react-native-sticky-table.svg?style=flat)](https://www.npmjs.com/package/react-native-sticky-table) [![react-native-sticky-table downloads](https://img.shields.io/npm/dm/react-native-sticky-table)](https://www.npmtrends.com/react-native-sticky-table) [![react-native-sticky-table install size](https://packagephobia.com/badge?p=react-native-sticky-table)](https://packagephobia.com/result?p=react-native-sticky-table) [![Android](https://img.shields.io/badge/Platform-Android-green?logo=android)](https://www.android.com) [![iOS](https://img.shields.io/badge/Platform-iOS-green?logo=apple)](https://developer.apple.com/ios) [![MIT](https://img.shields.io/badge/License-MIT-green)](https://opensource.org/licenses/MIT)\n\n---\n\nThe 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.\n\nOur 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.\n\n---\n\n## 🎬 Preview\n\n---\n\n| Stock Info Sticky Table                                                                                                                                                  | App Info Sticky Table                                                                                                                                                       |\n| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| \u003ca href=\"https://github.com/SimformSolutionsPvtLtd/react-native-recipe-sample\"\u003e\u003cimg width=\"202\" height=\"400\" alt=\"SimformSolutions\" src=\"./assets/StickyTable.gif\"\u003e \u003c/a\u003e | \u003ca href=\"https://github.com/SimformSolutionsPvtLtd/react-native-recipe-sample\"\u003e\u003cimg width=\"202\" height=\"400\" alt=\"SimformSolutions\" src=\"./assets/StickyTableApp.gif\"\u003e \u003c/a\u003e |\n\n---\n\n## Quick Access\n\n[Installation](#installation) | [Usage and Examples](#usage) | [Properties](#properties) | [Example](#example) | [License](#license)\n\n## Getting Started 🔧\n\nHere's how to get started with react-native-sticky-table in your React Native project:\n\n### Installation\n\n##### 1. Install the package\n\n```sh\nnpm install react-native-sticky-table react-native-reanimated react-native-gesture-handler lodash\n```\n\n###### --- or ---\n\n```sh\nyarn add react-native-sticky-table react-native-reanimated react-native-gesture-handler lodash\n```\n\n##### 2. Install cocoapods in the ios project\n\n```bash\ncd ios \u0026\u0026 pod install\n```\n\n\u003e Note: Make sure to add Reanimated's babel plugin to your `babel.config.js`\n\n```js\nmodule.exports = {\n      ...\n      plugins: [\n          ...\n          'react-native-reanimated/plugin',\n      ],\n  };\n```\n\n##### Know more about [react-native-reanimated](https://www.npmjs.com/package/react-native-reanimated), [react-native-gesture-handler](https://www.npmjs.com/package/react-native-gesture-handler) and [lodash](https://lodash.com/)\n\n## Usage\n\n#### Type of Data\n\n```jsx\nconst data = {\n  titleData: Array\u003cstring\u003e,\n  tableData: Array\u003c{\n    data: Array\u003cstring\u003e,\n    maxWidth?: number\n  }\u003e\n};\n```\n\n#### Sample Data\n\n```jsx\nconst data = {\n  titleData: ['Property', 'The Cooper', 'ITC-S Tex Valuable'],\n  tableData: [\n    {\n      maxWidth: 50,\n      data: ['Type', 'Sell', 'IPO'],\n    },\n    {\n      data: ['Total Price', '$1,025.00', '$4,20,500.00'],\n    },\n    {\n      data: ['Quantity', '100', '2500'],\n    },\n    {\n      data: ['High', '$1,325.00', '$4,22,513.00'],\n    },\n    {\n      data: ['Low', '$1,005.00', '$4,00,513.00'],\n    },\n    {\n      data: ['Market-Return', '21%', '40%'],\n    },\n    {\n      data: ['Status', 'Active', 'Inactive'],\n    },\n  ],\n};\n```\n\n#### Basic Example\n\n```jsx\nimport React from 'react';\nimport { SafeAreaView, StyleSheet } from 'react-native';\nimport { StickyTable } from 'react-native-sticky-table';\n\nconst App = () =\u003e {\n  const data = {\n    titleData: [\n      'Property',\n      'The Cooper',\n      'ITC-S Tex Valuable',\n      'The Wellesley',\n      'Coil Tex Valuable',\n      'The Westminster',\n      'BLS-d Tex',\n    ],\n    tableData: [\n      {\n        data: ['Type', 'Sell', 'IPO', 'Buy', 'Sell', 'Sell', 'IPO'],\n      },\n      {\n        data: [\n          'Total Price',\n          '$1,025.00',\n          '$4,20,500.00',\n          '$1,200.00',\n          '$4,40,000.00',\n          '$1,400.00',\n          '$2,500.00',\n        ],\n      },\n      {\n        data: ['Quantity', '100', '2500', '3,00,000', '400', '50', '10'],\n      },\n      {\n        data: [\n          'High',\n          '$1,325.00',\n          '$4,22,513.00',\n          '$1,212.00',\n          '$4,41,110.00',\n          '$1,445.00',\n          '$2,535.00',\n        ],\n      },\n      {\n        data: [\n          'Low',\n          '$1,005.00',\n          '$4,00,513.00',\n          '$1,000.00',\n          '$3,90,110.00',\n          '$925.00',\n          '$2,035.00',\n        ],\n      },\n      {\n        data: ['Market-Return', '21%', '40%', '2%', '34%', '1%', '90%'],\n      },\n      {\n        data: [\n          'Status',\n          'Active',\n          'Inactive',\n          'Active',\n          'Active',\n          'Inactive',\n          'Inactive',\n        ],\n      },\n    ],\n  };\n\n  return (\n    \u003cSafeAreaView style={styles.screen}\u003e\n      \u003cStickyTable\n        data={data}\n        rowTitleProps={{\n          removeProperty: 'The',\n          titleBackgroundColor: 'white',\n        }}\n      /\u003e\n    \u003c/SafeAreaView\u003e\n  );\n};\n\nexport default App;\n\nconst styles = StyleSheet.create({\n  screen: {\n    flex: 1,\n  },\n});\n```\n\n#### 🎬 Preview\n\n## \u003ca href=\"https://github.com/SimformSolutionsPvtLtd/react-native-sticky-table\"\u003e\u003cimg width=\"202\" height=\"400\" alt=\"SimformSolutions\" src=\"./assets/StickyTable.gif\"\u003e \u003c/a\u003e\n\n## Properties\n\n| Props           | Default |                   Type                    | Description                                                                      |\n| --------------- | :-----: | :---------------------------------------: | -------------------------------------------------------------------------------- |\n| **data**        |    -    |     [StickyTableData](#type-of-data)      | Data to render in tabular format                                                 |\n| maxWidth        |   132   |                  number                   | maximum width of rowTitle                                                        |\n| minWidth        |   104   |                  number                   | minimum width of rowTitle                                                        |\n| flatListProps   |    -    | FlatListProps\u003c[ArrayData](#type-of-data)\u003e | Provide \u003ca href=\"https://reactnative.dev/docs/flatlist#props\"\u003eflatlist props\u003c/a\u003e |\n| scrollViewProps |    -    |              ScrollViewProps              | props of the scroll view                                                         |\n| containerStyle  |    -    |          `StyleProp\u003cViewStyle\u003e`           | style of the container                                                           |\n| containerProps  |    -    |                 ViewProps                 | props of the container                                                           |\n| rowTitleProps   |    -    |      [RowTitleProps](#rowtitleprops)      | Row title props contain all the customizable props                               |\n| tableItemProps  |    -    |     [TableItemProps](#tableitemprops)     | Table item props contain all the customizable props for table item               |\n\n---\n\n##### RowTitleProps\n\n| Props                      | Default |              Type              | Description                          |\n| -------------------------- | :-----: | :----------------------------: | ------------------------------------ |\n| firstIndexContainerStyle   |    -    | `AnimatedStyleProp\u003cViewStyle\u003e` | style of the first index container   |\n| otherIndexContainerStyle   |    -    | `AnimatedStyleProp\u003cViewStyle\u003e` | style of the other index container   |\n| containerStyle             |    -    | `AnimatedStyleProp\u003cViewStyle\u003e` | style of the container               |\n| containerProps             |    -    |   `AnimateProps\u003cViewProps\u003e`    | props of the container               |\n| titleBackgroundColor       |    -    |             string             | background color of the title        |\n| separatorViewStyle         |    -    |     `StyleProp\u003cViewStyle\u003e`     | style of the separator               |\n| firstWordContainerStyle    |    -    | `AnimatedStyleProp\u003cViewStyle\u003e` | style of the first word container    |\n| firstWordTextProps         |    -    |   `AnimateProps\u003cTextProps\u003e`    | props of the first word text         |\n| restSentenceContainerStyle |    -    | `AnimatedStyleProp\u003cViewStyle\u003e` | style of the rest sentence container |\n| restSentenceTextProps      |    -    |   `AnimateProps\u003cTextProps\u003e`    | props of the rest sentence text      |\n| restSentenceContainerProps |    -    |   `AnimateProps\u003cViewProps\u003e`    | props of the rest sentence container |\n| removeProperty             |    -    |             string             | property to remove from the data     |\n| rowTitleSeparatorViewStyle |    -    |     `StyleProp\u003cViewStyle\u003e`     | style of the row title separator     |\n| rowTitleSeparatorViewProps |    -    |           ViewProps            | props of the row title separator     |\n\n---\n\n##### TableItemProps\n\n| Props                    | Default |          Type          | Description                        |\n| ------------------------ | :-----: | :--------------------: | ---------------------------------- |\n| listItemContainerStyle   |    -    | `StyleProp\u003cViewStyle\u003e` | style of the column container      |\n| listItemContainerProps   |    -    |       ViewProps        | props of the column container      |\n| separatorViewStyle       |    -    | `StyleProp\u003cViewStyle\u003e` | style of the separator             |\n| separatorViewProps       |    -    |       ViewProps        | props of the separator             |\n| columnTitleStyle         |    -    | `StyleProp\u003cViewStyle\u003e` | style of the column title          |\n| columnItemStyle          |    -    | `StyleProp\u003cViewStyle\u003e` | style of the column item           |\n| columnCommonItemStyle    |    -    | `StyleProp\u003cViewStyle\u003e` | style of the column common item    |\n| columnItemContainerProps |    -    |       ViewProps        | props of the column item container |\n| columnItemTextStyle      |    -    | `StyleProp\u003cTextStyle\u003e` | style of the column item text      |\n| columnItemTextProps      |    -    |       TextProps        | props of the column item text      |\n\n##### Know more about [ViewProps](https://reactnative.dev/docs/view#props), [ViewStyle](https://reactnative.dev/docs/view-style-props), [FlatListProps](https://reactnative.dev/docs/flatlist#props), [TextProps](https://reactnative.dev/docs/text#props), [TextStyle](https://reactnative.dev/docs/text-style-props#props)\n\n---\n\n## Example\n\nA full working example project is here [Example](./example/src/App.tsx)\n\n```sh\nyarn\nyarn example ios   // For ios\nyarn example android   // For Android\n```\n\n## Find this library useful? ❤️\n\nSupport it by joining [stargazers](https://github.com/SimformSolutionsPvtLtd/react-native-sticky-table/stargazers) for this repository.⭐\n\n## Bugs / Feature requests / Feedbacks\n\nFor bugs, feature requests, and discussion please use [GitHub Issues](https://github.com/SimformSolutionsPvtLtd/react-native-sticky-table/issues/new?labels=bug\u0026late=BUG_REPORT.md\u0026title=%5BBUG%5D%3A), [GitHub New Feature](https://github.com/SimformSolutionsPvtLtd/react-native-sticky-table/issues/new?labels=enhancement\u0026late=FEATURE_REQUEST.md\u0026title=%5BFEATURE%5D%3A), [GitHub Feedback](https://github.com/SimformSolutionsPvtLtd/react-native-sticky-table/issues/new?labels=enhancement\u0026late=FEATURE_REQUEST.md\u0026title=%5BFEEDBACK%5D%3A)\n\n## 🤝 How to Contribute\n\nWe'd love to have you improve this library or fix a problem 💪\nCheck out our [Contributing Guide](CONTRIBUTING.md) for ideas on contributing.\n\n## Awesome Mobile Libraries\n\n- Check out our other [available awesome mobile libraries](https://github.com/SimformSolutionsPvtLtd/Awesome-Mobile-Libraries)\n\n## License\n\n- [MIT License](./LICENSE)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimformsolutionspvtltd%2Freact-native-sticky-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsimformsolutionspvtltd%2Freact-native-sticky-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimformsolutionspvtltd%2Freact-native-sticky-table/lists"}