A React Native data table written purely in JSX with React and RealmJS DB (until refactor).
Unfortunately we've stopped development of react-native apps at The mSupply Foundation, and thus this repo hasn't been maintained in a long time. react-native is amazing! We just had some unique requirements where we felt we could do better with rust and reactjs. As much as we've aspired to one day give this repo TLC, it hasn't happened so to be transparent we're finally putting this notice up. Sorry for the dead end!
If you're looking for inspiration to create your own table components:
- In our app mSupply Mobile, we largely rewrote react-native-data-table! But didn't have the resources to polish it up and republish here :(.
- Try replicate something similar to shadcn's reactjs DataTable.
npm install --save react-native-data-table
react-native-data-table provides a number of components for constructing a table through composition.
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 |
Renders a Cell that supports having a string as children, or any component.
<Cell>Hello 1234</Cell>
| 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 |
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 |
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 |
A container for header cells, should be the outermost component returned in the renderHeader function given to the DataTable renderHeader prop.
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. |
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) {
<Row>
<Cell>record.code</Cell>
<Cell>record.name</Cell>
<EditableCell
value={record.quantity}
/>
</Row>
}
| 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 |
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 |
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.