react-native-data-table

by sussol

132 Stars 32 Forks Last release: almost 3 years ago (v0.2.0) 39 Commits 1 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

react-native-data-table

A React Native data table written purely in JSX with React and RealmJS DB (until refactor).

Installation

npm install --save react-native-data-table

Usage

react-native-data-table provides a number of components for constructing a table through composition.

data table example

DataTable

This component acts as a wrapper around the React Native ListView component. All the other components in this library should be used in the renderRow and renderHeader.

| Prop Name | Type | Description | | ------------------ | ------- | ------------------------------------------------------------------------- | | ListView Props | - | Will pass through any extra props to ListView | | listViewStyle | style | Will override styling of the ListView within the DataTable | | style | style | Style of the DataTable container (View) | | dataSource | object (required) | See ListView | | renderRow | func (required) | See RenderRow. Function can return anything, but the Cell components in this library are to make it easy for constructing a table | | renderHeader | func | Provide this function with appropriate return to make a table header | | refCallback | func | CallBack for utilising reference of the inner TextInput |

Cell

Renders a Cell that supports having a string as children, or any component.

Hello 1234

| Prop Name | Type | Description | | ------------- | ------- | ------------------------------------------------------------------------- | | textStyle | style | Will override styling of the Text label within the button | | style | style | Will override styling of the TouchableHighlight enclosing the button | | width | number | Gives width relative to other cells in the same container (via flexbox) | | children | any | Content of the cell; string, number or any component | | numberOfLines | number | Defines the number of lines in the cell that text should use |

CheckableCell

Renders a CheckableCell that renders either renderIsChecked or renderIsNotChecked when isChecked is true or false respectively. Whole cell returned is pressable. Callback should affect state of Parent in some way that keeps the state of parent in sync with state of the CheckableCell. Kept separate to maintain responsiveness of the cell.

| Prop Name | Type | Description | | ------------------ | ------- | ------------------------------------------------------------------------- | | isChecked | boolean | Used to set the initial state of the cell when the component mounts or rerenders (e.g. table sort order change) | | isDisabled | boolean | Will cause renderDisabled to be shown in the cell | | style | style | Style of the CheckableCell (View props) | | width | number | Gives width relative to other cells in the same container (via flexbox) | | onPress | func | CallBack Function for handling user pressing CheckableCell | | renderIsChecked | object | Object is rendered as child in CheckableCell if checked | | renderIsNotChecked | object | Object is rendered as child in CheckableCell if not checked | | renderDisabled | object | Object is rendered as child in CheckableCell if isDisabled is true |

EditableCell

Renders a cell with an editable text input. Has own state for managing TextInput content and has onEndEditing callback for utilising user input.

| Prop Name | Type | Description | | ------------------ | ------- | ------------------------------------------------------------------------- | | TextInput Props | - | Will pass through any extra props to TextInput | | textStyle | style | Will override styling of the TextInput within the button | | style | style | Style of the EditableCell (View props) | | width | number | Gives width relative to other cells in the same container (via flexbox) | | onEndEditing | func | Will be called with 2 params: target and the newValue on end of editing. This function should run code to persist the change to local storage | | target | object | Data object of the row/record being edited | | value | string or number | Provides initial value. Will change what cell shows if prop changes| | refCallback | func | CallBack for utilising reference of the inner TextInput |

Header

A container for header cells, should be the outermost component returned in the renderHeader function given to the DataTable renderHeader prop.

HeaderCell

Renders a headerCell that supports being a plain View with Text or being a TouchableOpacity (with callback). In the latter case sort arrows will be rendered and controlled with isSelected and isAscending props. This could also be thought of as "column headers", as that is what this component sets out to ultimately achieve.

| Prop Name | Type | Description | | ------------------ | ------- | ------------------------------------------------------------------------- | | TouchableOpacity Props | - | Will pass through any extra props to TouchableOpacity | | textStyle | style | Will override styling of the Text label within the HeaderCell | | style | style | Will override styling of the TouchableHighlight enclosing the button | | width | number | Gives width relative to other cells in the same container (via flexbox) | | onPress | func | CallBack Function for handling user pressing headerCell. Should change some parent state that affects the following 2 props | | isSelected | Boolean | When false up+down sort arrows renderHeader, otherwise as below | | isAscending | Boolean | Sort arrow up if true, down if false. |

Row

A container to be used in renderRow function in DataTable renderRow Prop. Has internal state that knows whether the row is expanded or not. Toggled on press. Will only render an expansion if provided.

renderRow(record) {
  
    record.code
    record.name
    
  
}

| Prop Name | Type | Description | | --------------- | ------- | ------------------------------------------------------------------------- | | style | style | Will override styling of the TouchableHighlight enclosing the button | | children | any | Content of the Row; construct with Cell, EditableCell, etc. | | onPress | func | CallBack for doing anything on the press of the row. Also toggles expansion | | isExpanded | boolean | If true, the expansion defined renderExpansion will be shown below this row, moving other rows down. | | renderExpansion | func | A function that should return an Expansion component with custom content |

Expansion

Literally just a wrapper for View. To be used in the Row prop 'renderExpansion'. Made basically just for consistent semantics.

| Prop Name | Type | Description | | ------------------ | ------- | ------------------------------------------------------------------------- | | View Props | - | Will pass through any extra props to View |

TableButton

Like expansion, this is essentially just a wrapper around TouchableOpacity with a default flex value of 1. Which I believe became redundant at some point in RN development.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.