npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-native-generic-table-page

v0.4.1

Published

A customisable page containing a searchable table of data from realm for react native

Downloads

12

Readme

react-native-generic-table-page

Provides a generic implementation of a standard page in a data-centric app, containing a table of data, a search bar. contains a searchable table.

Example generic table page

Installation

npm install --save react-native-generic-table-page

Usage

For working examples of usage, see mSupply Mobile.

Required Props

columns (array)

An array of objects defining each of the columns. Each entry must contain the 'key' (string), 'width' (integer), and 'title' (string) of the column. Each may optionally contain 'sortable' (boolean).

data (array)

Defines the data displayed in the table, ready for sorting and filtering

Optional Props

refreshData(searchTerm, sortBy, isAscending)

This method should filter the data to match the given parameters, and update the 'data' prop passed in. If provided, the generic table page will display a search bar. If not provided, the generic table page will take care of sorting internally, as well as filtering if 'searchKey' is provided (see below)

searchKey (string)

Defines the column to filter on when the user types in the search bar. If provided, the page will display a search bar. Don't provide if you control data filtering externally using refreshData (see above)

defaultSortKey (string)

Defines the column to sort on by default

defaultSortDirection (string)

Either 'ascending' or 'descending', defines which direction to sort the data initially

footerData (object)

If passed in, defines data to display in a footer row that is always rendered at the bottom of the data table

renderCell(key, record)

This method defines how each cell is rendered, given the column key and database record. The default method returns a simple string, which will be rendered in a static text cell. Alternative formats are listed in the method comment within index.js

onEndEditing(key, rowData, newValue)

Carries out any response required when an editable cell is edited. The obvious example is saving the new value to the database.

onSelectionChange(newSelection)

A callback with the array of ids representing all rows with a checkable cell turned 'on'

selection (array)

If selection is controlled externally, defines an array of ids of rows that are 'selected', i.e. a checkable cell is turned on in that row

renderExpansion (rowData)

Defines the component to be rendered in the expansion area if a row is pressed. Should not be used in conjunction with onRowPress (see below)

renderTopLeftComponent (function)

Defines the component to be rendered in the top left corner of the page, above the search bar and data table

renderTopRightComponent (rowData)

Defines the component to be rendered in the top right corner of the page, to the right of the search bar and above the data table

onRowPress (rowData)

Allows defining some custom behaviour on pressing a row, e.g. navigating to a drilled down view related to the row's data. Called when a row is pressed with the rowData as the single argument. Should not be provided if rows are not pressable, or if renderExpansion is provided

rowHeight (integer)

Sets the height of the rows in the data table.

pageStyles (object)

Sets the style of components within the page, including

  • searchBar (style of the search bar, see github.com/sussol/react-native-ui-components for details)
  • pageContentContainer (style of the outer containing View)
  • container (style of the inner containing View)
  • pageTopSectionContainer (style of the container View above the data table)
  • pageTopLeftSectionContainer (style of the View within the pageTopSectionContainer View, contains the search bar by default)

dataTableStyles (object)

Sets the style of components within the data table, including

  • dataTable
  • cell
  • header
  • headerCell
  • rightMostCell
  • text See github.com/sussol/react-native-data-table for details

searchBarColor (string)

Sets the color of the search bar, see github.com/sussol/react-native-ui-components for details

searchBarPlaceholderText (string)

The placeholder text for the search bar

colors (object)

Sets the color of components within the data table, including

  • checkableCellDisabled
  • checkableCellChecked
  • checkableCellUnchecked
  • editableCellUnderline

children (array)

Any children passed in will be rendered below the data table (useful for modals)