Skip to content

Commit 69332c7

Browse files
KrisLauKrisLau
committed
Add horizontal scrolling, add stickyHeader prop, & remove Line
`stickyHeader` prop defaults to true. Line was removed in favor of `borderBottomWidth` since it's better to not have to calculate the width of the line each time.
1 parent cb8e913 commit 69332c7

File tree

5 files changed

+54
-71
lines changed

5 files changed

+54
-71
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,7 @@ noOfPages | Number | 2 | No
110110
onRowSelect | Func | - | No
111111
backgroundColor | string, rgba, hex | '#e4edec' | No
112112
doSort | boolean | true | No
113+
stickyHeader | boolean | true | No
113114
headerLabelStyle | {} of Text Style | - | No
114115

115116
## Constants

‎src/DataTable.tsx

Lines changed: 45 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import React from 'react';
2-
import { View, ScrollView } from 'react-native';
2+
import {View, ScrollView} from 'react-native';
33
import DataTableRow from './DataTableRow';
44
import DataTableFooter from './DataTableFooter';
55
import DataTableHeader from './DataTableHeader';
6-
import Line from './Line';
76
import sortData from '../functions/sort';
87
import showCurrentProgress from '../functions/showCurrentProgress';
98

@@ -23,6 +22,7 @@ interface PropTypes {
2322
onRowSelect?: (anyVariable) => object;
2423
backgroundColor?: string;
2524
doSort?: boolean;
25+
stickyHeader?: boolean;
2626
headerLabelStyle?: object;
2727
}
2828

@@ -40,7 +40,7 @@ class DataTable extends React.Component<PropTypes> {
4040
endDataArray: [], //[{id, endData}]
4141
noOfPages: 3, //default
4242
activeDisplayDataId: 0,
43-
mapColNameToType: {}
43+
mapColNameToType: {},
4444
}
4545

4646

@@ -122,7 +122,7 @@ class DataTable extends React.Component<PropTypes> {
122122
data: props.data,
123123
colSettings: props.colSettings,
124124
colNames: props.colNames,
125-
noOfPages: props.noOfPages
125+
noOfPages: props.noOfPages,
126126
})
127127

128128
if (snap == currentState.snap) return null;
@@ -180,41 +180,49 @@ class DataTable extends React.Component<PropTypes> {
180180
};
181181
}
182182

183-
render() {
184-
183+
renderItem = (item, index) => {
185184
return (
186-
<View style={{ backgroundColor: this.props.backgroundColor ? this.props.backgroundColor : '#e4edec' }}
187-
onLayout={e => {
188-
this.setState({ widthOfContainer: e.nativeEvent.layout.width })
189-
}}>
190-
191-
<DataTableHeader
192-
colNames={this.state.colNames}
193-
mapColNameToType={this.state.mapColNameToType}
194-
defaultEachColumnWidth={this.state.defaultEachColumnWidth}
195-
eachColWidth={this.state.eachColWidth}
196-
handleColPress={this.handleColPress}
197-
doSort={this.props?.doSort}
198-
style={this.props?.headerLabelStyle}
199-
/>
185+
<DataTableRow
186+
handleOnRowSelect={this.handleOnRowSelect}
187+
key={index}
188+
index={index}
189+
data={item}
190+
mapColNameToType={this.state.mapColNameToType}
191+
colNames={this.state.colNames}
192+
eachColWidth={this.state.eachColWidth}
193+
defaultEachColumnWidth={this.state.defaultEachColumnWidth}
194+
/>
195+
);
196+
}
200197

201-
<Line width={this.state.widthOfContainer} header />
202-
<ScrollView>
203-
{
204-
this.state.displayData.map((item, index) => (
205-
<DataTableRow
206-
handleOnRowSelect={this.handleOnRowSelect}
207-
widthOfLine={this.state.widthOfContainer}
208-
key={index}
209-
index={index}
210-
data={item}
211-
mapColNameToType={this.state.mapColNameToType}
212-
colNames={this.state.colNames}
213-
eachColWidth={this.state.eachColWidth}
214-
defaultEachColumnWidth={this.state.defaultEachColumnWidth}
215-
/>
216-
))
217-
}
198+
render() {
199+
return (
200+
<View
201+
onLayout={e => this.setState({ widthOfContainer: e.nativeEvent.layout.width })}
202+
style={{flex: 1, backgroundColor: this.props.backgroundColor ? this.props.backgroundColor : '#e4edec'}}>
203+
<ScrollView
204+
nestedScrollEnabled={true}
205+
bounces={false}
206+
horizontal={true}
207+
showsHorizontalScrollIndicator={false}>
208+
<ScrollView
209+
bounces={false}
210+
showsVerticalScrollIndicator={false}
211+
stickyHeaderIndices={this.props?.stickyHeader === false ? [] : [0]}>
212+
<DataTableHeader
213+
colNames={this.state.colNames}
214+
mapColNameToType={this.state.mapColNameToType}
215+
defaultEachColumnWidth={this.state.defaultEachColumnWidth}
216+
eachColWidth={this.state.eachColWidth}
217+
handleColPress={this.handleColPress}
218+
doSort={this.props?.doSort}
219+
style={this.props?.headerLabelStyle}
220+
backgroundColor={this.props.backgroundColor ? this.props.backgroundColor : '#e4edec'}
221+
/>
222+
{this.state.displayData.map((item, index) => {
223+
return this.renderItem(item, index);
224+
})}
225+
</ScrollView>
218226
</ScrollView>
219227
<DataTableFooter
220228
start={this.state.startDataArray}
@@ -223,7 +231,6 @@ class DataTable extends React.Component<PropTypes> {
223231
dataLength={this.state.data.length}
224232
handleNextPreviousPagePress={this.handleNextPreviousPagePress}
225233
/>
226-
227234
</View>
228235
);
229236
}

‎src/DataTableHeader.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,12 @@ const PADDING_TOP = 20;
66

77
const DataTableHeader = React.memo((props) => {
88

9-
const { colNames, mapColNameToType, defaultEachColumnWidth, handleColPress, doSort, eachColWidth, style } = props;
9+
const { colNames, mapColNameToType, defaultEachColumnWidth, handleColPress, doSort, backgroundColor, eachColWidth, style } = props;
1010

1111
const isDoSort = doSort == false ? false : true;
1212

1313
return (
14-
<View style={styles.headerContainer}>
14+
<View style={[styles.headerContainer, {backgroundColor: backgroundColor}]}>
1515
{
1616
colNames.map((colName, index) => {
1717
const colWidth = eachColWidth[colName] == undefined ? defaultEachColumnWidth : eachColWidth[colName];
@@ -74,6 +74,8 @@ const styles = StyleSheet.create({
7474
flexDirection: 'row',
7575
paddingHorizontal: 10,
7676
alignItems: 'center',
77+
borderBottomWidth: 0.4,
78+
borderBottomColor: 'grey',
7779
},
7880
headerRow: {
7981
paddingTop: PADDING_TOP,

‎src/DataTableRow.js

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
import React from 'react';
22
import { View, Text, StyleSheet } from 'react-native';
33
import { COL_TYPES } from './DataTable';
4-
import Line from './Line';
54
import CheckBox from './CheckBox';
65

76
const DataTableRow = React.memo((props) => {
87

98
//data is object
10-
const { data, colNames, defaultEachColumnWidth, mapColNameToType, widthOfLine, handleOnRowSelect, eachColWidth } = props;
9+
const { data, colNames, defaultEachColumnWidth, mapColNameToType, handleOnRowSelect, eachColWidth } = props;
1110

1211
let color = 'black';
1312
let backgroundColor = 'transparent';
@@ -20,7 +19,6 @@ const DataTableRow = React.memo((props) => {
2019
}
2120
return (
2221
<>
23-
2422
<View style={[styles.rowContainer, { backgroundColor }]}>
2523
{
2624
colNames.map((name, index) => {
@@ -55,9 +53,6 @@ const DataTableRow = React.memo((props) => {
5553
})
5654
}
5755
</View>
58-
59-
<Line row width={widthOfLine} />
60-
6156
</>
6257
);
6358
})
@@ -68,7 +63,9 @@ const styles = StyleSheet.create({
6863
rowContainer: {
6964
flexDirection: 'row',
7065
backgroundColor: 'green',
71-
paddingHorizontal: 10
66+
paddingHorizontal: 10,
67+
borderBottomWidth: 0.4,
68+
borderBottomColor: '#e3e3e3',
7269
},
7370
rowCellText: {
7471
color: 'black',

‎src/Line.js

Lines changed: 0 additions & 24 deletions
This file was deleted.

0 commit comments

Comments
 (0)