{"id":28494501,"url":"https://github.com/ingenuity-ph/react-native-stateful-table-view","last_synced_at":"2026-05-07T13:09:06.447Z","repository":{"id":57118686,"uuid":"119014271","full_name":"ingenuity-ph/react-native-stateful-table-view","owner":"ingenuity-ph","description":null,"archived":false,"fork":false,"pushed_at":"2018-01-26T07:37:44.000Z","size":10,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-09-25T00:32:12.283Z","etag":null,"topics":["react","react-native","stateful","stateful-table-view","table-view"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/ingenuity-ph.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-26T06:22:51.000Z","updated_at":"2020-08-04T03:17:51.000Z","dependencies_parsed_at":"2022-08-23T09:50:47.268Z","dependency_job_id":null,"html_url":"https://github.com/ingenuity-ph/react-native-stateful-table-view","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ingenuity-ph/react-native-stateful-table-view","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ingenuity-ph%2Freact-native-stateful-table-view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ingenuity-ph%2Freact-native-stateful-table-view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ingenuity-ph%2Freact-native-stateful-table-view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ingenuity-ph%2Freact-native-stateful-table-view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ingenuity-ph","download_url":"https://codeload.github.com/ingenuity-ph/react-native-stateful-table-view/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ingenuity-ph%2Freact-native-stateful-table-view/sbom","scorecard":{"id":488616,"data":{"date":"2025-08-11","repo":{"name":"github.com/ingenuity-ph/react-native-stateful-table-view","commit":"411ba97d2960c35fc78bb2224daa9bd772f56c79"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3,"checks":[{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Code-Review","score":0,"reason":"Found 0/6 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}}]},"last_synced_at":"2025-08-19T18:28:08.984Z","repository_id":57118686,"created_at":"2025-08-19T18:28:08.984Z","updated_at":"2025-08-19T18:28:08.984Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32738967,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-07T02:14:30.463Z","status":"ssl_error","status_checked_at":"2026-05-07T02:14:29.405Z","response_time":62,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["react","react-native","stateful","stateful-table-view","table-view"],"created_at":"2025-06-08T10:06:51.918Z","updated_at":"2026-05-07T13:09:06.442Z","avatar_url":"https://github.com/ingenuity-ph.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-stateful-table-view [![NPM version](https://badge.fury.io/js/react-native-stateful-table-view.svg)](https://npmjs.org/package/react-native-stateful-table-view) [![Build Status](https://travis-ci.org/ingenuityph/react-native-stateful-table-view.svg?branch=master)](https://travis-ci.org/ingenuityph/react-native-stateful-table-view)\n\n\u003e A React Native component based on FlatList that provides an option to display different views for each of its states (empty datasource, error, loading).\n\n## Installation\n\n```sh\n$ npm install --save @ingenuity-labs/react-native-stateful-table-view\n```\n\n## Usage\nThe packages consists of various components that users can utilize to make the most of this package:\n* StatefulTableView\n* StatefulTableViewConstants\n* StatefulTableInfoView\n* StatefulTableErrorView\n* StatefulTableLoadingView\n\nUsing all of these components is the recommended approach, although the last three props can be omitted to allow users to provide their own state views.\n\n### StatefulTableView\nThe actual table view component that utilizes a `FlatList` component in the hood. What makes it different from a regular FlatList is that it also handle several conditions to display different views for each of its state.\n\nIt has several required props needed to be supplied in order for the component to work:\n* `data` - Refers to the actual dataset to be fed to the FlatList.\n* `keyExtractor` - Function to define the key to be used for each FlatList item.\n* `renderItem` - Function to configure component to be used for displaying each row.\n* `state` - The current state of the component.\n\nExample of its usage (without any kind of customization):\n```\n\u003cStatefulTableView\n  data={['Item 1', 'Item 2']}\n  keyExtractor={this.keyExtractor}\n  renderItem={this.renderItem}\n  state={StatefulTableViewConstants.States.DATA}\n/\u003e\n```\n\nThese other props will allow users to further customize this component:\n* `emptyStateView` - Providing a component to this prop will override the default empty state view, thus, displaying the provided component instead for an empty state.\n* `errorStateView` - Providing a component to this prop will override the default error state view, thus, displaying the provided component instead when resulting to an error state.\n* `loadingStateView` - Providing a component to this prop will override the default loading state view, thus, displaying the provided component instead when loading of dataset is ongoing.\n* `refreshControl` - A `RefreshControl` component which will enable pull-to-refresh functionality when provided.\n* `separator` - A component which will serve as the separator for each row.\n\n### StatefulTableViewConstants\nDictionary containing the states that the `StatefulTableView` will recognize in order to display its corresponding state view.\n```\nStates: {\n  LOADING: 0,\n  DATA: 1,\n  ERROR: {\n    SERVER: -1,\n    INTERNET_CONNECTION: -2\n  },\n}\n```\n\n* `LOADING` - Refers to the state in which the process of fetching the dataset is currently ongoing.\n* `DATA` - Refers to the state in which the fetching of the dataset has either resulted in an empty dataset or has actual content.\n* `ERROR` - Further divided into `SERVER` and `INTERNET_CONNECTION`. The former can be used when fetching of data from an API or other similar platform results in a error, while the latter is if the fetching of data was disrupted by an internet connection problem.\n\n### StatefulTableInfoView\nOne of the 3 state views, the `StatefulTableInfoView` serves as a generic state view, wherein you can provide any information not necessarily tied in to a specific state. By default, it defaults to an empty state view.\n\nWith its default implementation (not supplying any props) will display a **\"No data available\"** text intended as a default value for empty states. Providing values to these following props will allow this component to better cater user needs:\n* `headerText` (required) - The primary text to be displayed in the view.\n* `customStyle` - A `StyleSheet` object to customize the appearance of the `headerText`, `detailText`, and `container`.\n\nA sample `customStyle` looks like this:\n```\nlet padding = 10;\nlet customStyle = {\n  container: {\n  // Your style here\n  },\n  detailText: {\n  // Your style here\n  },\n  headerText: {\n  // Your style here\n  },\n};\n```\n* `detailText` - The supplementing information to be displayed in the view.\n* `imageDetails` - A dictionary supplying values for `Image` component's props. Not providing the values for the *style* prop will use the default styling for the image provided by this package.\n\nA full implementation of this component looks like this:\n```\n\u003cStatefulTableInfoView\n  headerText='No data fetched'\n  detailText='Please try again later.'\n  imageDetails={{\n    source: require('./empty.png'),\n    // Optional\n    style: {\n      // Your style here\n    }\n  }}\n  customStyle={customStyle}\n/\u003e\n```\n\n### StatefulTableErrorView\nAnother of the three state views, the `StatefulTableErrorView` serves as a state view specific for error states.\n\nUnlike the previous state view, this has a required prop, *state*, which defines as to what default message it should display. **\"No internet connection.\"** text is displayed for the `INTERNET_CONNECTION` error, and **\"An error occured.\"** for the `SERVER` error.\n\nProviding values to these following props will allow this component to better cater user needs:\n* `customStyle` - A `StyleSheet` object to customize the appearance of the `headerText`, `detailText`, and `container`.\n\nSee `customStyle` in *StatefulTableInfoView* for a sample guide.\n* `detailText` - The supplementing information to be displayed in the view.\n* `headerText` (required) - The primary text to be displayed in the view.\n* `imageDetails` - A dictionary supplying values for `Image` component's props. Not providing the *style* prop will use the default styling for the image provided by this package.\n* `errorButtonDetails` - A dictionary supplying values for the custom `ErrorButton` component's props bundled in this package. Providing a value for this prop will enable a button to be displayed in the view, which can be further customized by the user.\n\n```\nerrorButtonDetails={{\n  onPress: () =\u003e {\n    this.setState({\n      tableViewState: StatefulTableViewConstants.States.LOADING\n    });\n    this.fetchJokes();\n  },\n  // Optional\n  title: 'Reload',\n  // Optional\n  customStyle: {\n    title: {\n      // Your style here\n    },\n    view: {\n      // Your style here\n    }\n  }\n}}\n```\nFor the button to have any functionality, the `onPress` prop must be provided. This is where you will put the function you want to be executed when the button is pressed.\n\n`title` refers to the title of the button, and supplying any value defaults the button to have **\"Retry\"** as its title.\n\nProvide a value to the `customStyle` prop if you want to further customize the appearance of the button.\n\nA full implementation of this component looks like this:\n```\n\u003cStatefulTableErrorView\n  headerText='Error'\n  detailText='Cannot complete request. Please try again later.'\n  state={StatefulTableViewConstants.States.ERROR.SERVER}\n  imageDetails={{\n    source: require('./empty.png'),\n    style: {\n      // Your style here\n    }\n  }}\n  errorButtonDetails={{\n    onPress: () =\u003e {\n      console.log('Clicked')\n    },\n    // Optional\n    title: 'Reload',\n    // Optional\n    customStyle: {\n      view: {\n        // Your style here\n      }\n    }\n  }}\n  customStyle={customStyle}\n/\u003e\n```\n\n### StatefulTableLoadingView\nLastly, the `StatefulTableLoadingView` is specifically built for the loading state.\n\nWith its default implementation (not supplying any props) will display a **\"Loading...\"** text with a default activity indicator. Providing values to these following props will allow this component to better cater user needs:\n* `activityIndicatorDetails` - A dictionary supplying values for `ActivityIndicator` component's props. Not providing the *style* prop will use the default styling for the activity indicator provided by this package.\n* `customStyle` - A `StyleSheet` object to customize the appearance of the `headerText`, `detailText`, and `container`.\n* `detailText` - The supplementing information to be displayed in the view.\n* `hasActivityIndicator` - Visibility of the activity indicator. Defaults to `true`.\n* `headerText` - The primary text to be displayed in the view.\n\nA full implementation of this component looks like this:\n```\n\u003cStatefulTableLoadingView\n  headerText='Processing...'\n  detailText='This may take a while'\n  activityIndicatorDetails={{\n    // Optional\n    color: 'black',\n    // Optional\n    style: {\n      // Your style here\n    }\n  }}\n  customStyle={customStyle}\n/\u003e\n```\n\n## Contributing\n\n1. Fork repository\n2. Create your feature branch: `git checkout -b my-new-feature`\n3. Commit your changes: `git commit -am 'Add some feature'`\n4. Push to the branch: `git push origin my-new-feature`\n5. Submit a pull request\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fingenuity-ph%2Freact-native-stateful-table-view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fingenuity-ph%2Freact-native-stateful-table-view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fingenuity-ph%2Freact-native-stateful-table-view/lists"}