chore: doc updated
This commit is contained in:
parent
eb8f3dfa85
commit
4a6436e369
369
README.md
369
README.md
@ -28,6 +28,7 @@ import { Table, TableWrapper, Row, Rows, Col, Cols, Cell } from 'react-native-ta
|
||||
## Examples
|
||||
|
||||
### Basic Table
|
||||
- [`BasicExample.tsx`](/example/src/BasicExample.tsx)
|
||||
|
||||
<img src="./assets/tabeller_basic_table.png" width="340"/>
|
||||
|
||||
@ -83,373 +84,53 @@ const styles = StyleSheet.create({
|
||||
});
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Scrollable Example
|
||||
<img src="./assets/tabeller_scrollable_table.webp" width="340"/>
|
||||
|
||||
```tsx
|
||||
import { Table, Row, Rows } from 'react-native-tabeller';
|
||||
import { View, StyleSheet, ScrollView } from 'react-native';
|
||||
- [`ScrollableExample.tsx`](/example/src/ScrollableExample.tsx)
|
||||
|
||||
export const ScrollableExample = () => {
|
||||
const tableHead = ['Head', 'Head2', 'Head3', 'Head4', 'Head5', 'Head6', 'Head7', 'Head8'];
|
||||
const widthArr = [40, 69, 80, 100, 120, 140, 160, 180];
|
||||
<img src="./assets/tabeller_scrollable_table.png" width="340"/>
|
||||
|
||||
// generate a large table data
|
||||
const tableData = [];
|
||||
for (let i = 0; i < 30; i += 1) {
|
||||
const rowData = [];
|
||||
for (let j = 0; j < 8; j += 1) {
|
||||
rowData.push(`${i}${j}`);
|
||||
}
|
||||
tableData.push(rowData);
|
||||
}
|
||||
---
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<ScrollView horizontal={true}>
|
||||
<View>
|
||||
<Table borderStyle={{ borderWidth: 2, borderColor: '#00000' }}>
|
||||
<Row
|
||||
data={tableHead}
|
||||
widthArr={widthArr}
|
||||
style={styles.header}
|
||||
textStyle={styles.headerText}
|
||||
/>
|
||||
</Table>
|
||||
<ScrollView style={styles.dataWrapper}>
|
||||
<Table borderStyle={{ borderWidth: 1, borderColor: '#00000' }}>
|
||||
<Rows
|
||||
data={tableData}
|
||||
widthArr={widthArr}
|
||||
style={styles.row}
|
||||
textStyle={styles.text}
|
||||
/>
|
||||
</Table>
|
||||
</ScrollView>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
### Sticky Column Example
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
padding: 16,
|
||||
paddingTop: 30,
|
||||
height: 400,
|
||||
backgroundColor: '#fff',
|
||||
},
|
||||
header: {
|
||||
height: 50,
|
||||
backgroundColor: '#C6F3E0'
|
||||
},
|
||||
headerText: {
|
||||
textAlign: 'center',
|
||||
fontWeight: 'bold'
|
||||
},
|
||||
text: {
|
||||
textAlign: 'center',
|
||||
padding: 5
|
||||
},
|
||||
dataWrapper: {
|
||||
marginTop: -1
|
||||
},
|
||||
row: {
|
||||
height: 40,
|
||||
backgroundColor: '#fff'
|
||||
}
|
||||
});
|
||||
```
|
||||
- [`StickyColumnExample.tsx`](/example/src/StickyColumnExample.tsx)
|
||||
|
||||
<img src="./assets/tabeller_scrollable_sticky_1st_column.webp" width="340"/>
|
||||
|
||||
---
|
||||
|
||||
### Example three
|
||||
<img src="./assets/tabeller_example_three.webp" width="340"/>
|
||||
|
||||
```tsx
|
||||
import { Table, TableWrapper, Row, Rows, Col } from 'react-native-tabeller';
|
||||
import { View, StyleSheet } from 'react-native';
|
||||
- [`ExampleThree.tsx`](/example/src/ExampleThree.tsx)
|
||||
|
||||
export const ExampleThree = () => {
|
||||
const tableHead = ['', 'Head1', 'Head2', 'Head3'];
|
||||
const tableTitle = ['Title1', 'Title2', 'Title3'];
|
||||
const tableData = [
|
||||
['a', 'b', 'c'],
|
||||
['d', 'e', 'f'],
|
||||
['g', 'h', 'i']
|
||||
];
|
||||
<img src="./assets/tabeller_example_three.png" width="340"/>
|
||||
|
||||
const onCellPress = (data: any) => {
|
||||
console.log(`Cell pressed: ${data}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Table borderStyle={{ borderWidth: 1 }}>
|
||||
<Row
|
||||
data={tableHead}
|
||||
style={styles.head}
|
||||
textStyle={styles.headText}
|
||||
/>
|
||||
<TableWrapper style={styles.wrapper}>
|
||||
<Col
|
||||
data={tableTitle}
|
||||
style={styles.title}
|
||||
heightArr={[28, 28, 28]}
|
||||
textStyle={styles.titleText}
|
||||
/>
|
||||
<Rows
|
||||
data={tableData}
|
||||
flexArr={[1, 1, 1]}
|
||||
style={styles.row}
|
||||
textStyle={styles.text}
|
||||
onPress={onCellPress}
|
||||
/>
|
||||
</TableWrapper>
|
||||
</Table>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
padding: 16,
|
||||
paddingTop: 30,
|
||||
backgroundColor: '#fff'
|
||||
},
|
||||
head: {
|
||||
height: 44,
|
||||
backgroundColor: '#C6F3E0'
|
||||
},
|
||||
text: {
|
||||
textAlign: 'center',
|
||||
padding: 5
|
||||
},
|
||||
headText: {
|
||||
textAlign: 'center',
|
||||
fontWeight: 'bold'
|
||||
},
|
||||
row: {
|
||||
height: 40,
|
||||
backgroundColor: '#fff'
|
||||
},
|
||||
wrapper: {
|
||||
flexDirection: 'row'
|
||||
},
|
||||
title: {
|
||||
flex: 1,
|
||||
backgroundColor: '#C6F3E0'
|
||||
},
|
||||
titleText: {
|
||||
textAlign: 'left',
|
||||
marginLeft: 6,
|
||||
fontWeight: '600'
|
||||
}
|
||||
});
|
||||
```
|
||||
---
|
||||
|
||||
### Example Four
|
||||
<img src="./assets/tabeller_example_four.webp" width="340"/>
|
||||
|
||||
```tsx
|
||||
import React, { useState } from 'react';
|
||||
import { StyleSheet, View, Text, TouchableOpacity, Alert } from 'react-native';
|
||||
import { Table, TableWrapper, Row, Cell } from 'react-native-tabeller';
|
||||
- [`ExampleFour.tsx`](/example/src/ExampleFour.tsx)
|
||||
|
||||
type TableDataType = string[][];
|
||||
<img src="./assets/tabeller_example_four.png" width="340"/>
|
||||
|
||||
export const ExampleFour: React.FC = () => {
|
||||
const [tableHead] = useState<string[]>(['Head', 'Head2', 'Head3', 'Head4']);
|
||||
const [tableData] = useState<TableDataType>([
|
||||
['1', '2', '3', '4'],
|
||||
['a', 'b', 'c', 'd'],
|
||||
['1', '2', '3', '4'],
|
||||
['a', 'b', 'c', 'd']
|
||||
]);
|
||||
|
||||
const alertIndex = (index: number): void => {
|
||||
Alert.alert(`This is row ${index + 1}`);
|
||||
};
|
||||
|
||||
const element = (data: any, index: number): React.ReactElement => (
|
||||
<TouchableOpacity onPress={() => alertIndex(index)}>
|
||||
<View style={styles.btn}>
|
||||
<Text style={styles.btnText}>button</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Table borderStyle={{ borderColor: 'transparent' }}>
|
||||
<Row data={tableHead} style={styles.head} textStyle={styles.text} />
|
||||
{
|
||||
tableData.map((rowData, index) => (
|
||||
<TableWrapper key={index} style={styles.row}>
|
||||
{
|
||||
rowData.map((cellData, cellIndex) => (
|
||||
<Cell
|
||||
key={cellIndex}
|
||||
data={cellIndex === 3 ? element(cellData, index) : cellData}
|
||||
textStyle={styles.text}
|
||||
/>
|
||||
))
|
||||
}
|
||||
</TableWrapper>
|
||||
))
|
||||
}
|
||||
</Table>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' },
|
||||
head: { height: 40, backgroundColor: '#C6F3E0' },
|
||||
text: { margin: 8 },
|
||||
row: { flexDirection: 'row', backgroundColor: '#FFF1C1' },
|
||||
btn: { width: 58, height: 18, backgroundColor: '#78B7BB', borderRadius: 2 },
|
||||
btnText: { textAlign: 'center', color: '#fff' }
|
||||
});
|
||||
|
||||
export default ExampleFour;
|
||||
```
|
||||
---
|
||||
|
||||
### Example Five
|
||||
|
||||
- [`ExampleFive.tsx`](/example/src/ExampleFive.tsx)
|
||||
|
||||
<img src="./assets/tabeller_example_five.png" width="340"/>
|
||||
|
||||
```tsx
|
||||
import React, { useState } from 'react';
|
||||
import { StyleSheet, View, Text, TouchableOpacity, Alert } from 'react-native';
|
||||
import { Table, TableWrapper, Row, Col, Rows } from 'react-native-tabeller';
|
||||
---
|
||||
|
||||
export const ExampleFive: React.FC = () => {
|
||||
const alertIndex = (value: string): void => {
|
||||
Alert.alert(`This is column ${value}`);
|
||||
};
|
||||
### SheetJS Fetch Example
|
||||
|
||||
const elementButton = (value: string): React.ReactElement => (
|
||||
<TouchableOpacity onPress={() => alertIndex(value)}>
|
||||
<View style={styles.btn}>
|
||||
<Text style={styles.btnText}>button</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
- [`SheetJSExample.tsx`](/example/src/SheetJSExample.tsx)
|
||||
|
||||
const [tableHead] = useState<any[]>(['', elementButton('1'), elementButton('2'), elementButton('3')]);
|
||||
const [sideHead] = useState<string[]>(['H1', 'H2']);
|
||||
const [rowTitles] = useState<string[]>(['Title', 'Title2', 'Title3', 'Title4']);
|
||||
|
||||
// Table data - matching the structure in the screenshot
|
||||
const [tableData] = useState<string[][]>([
|
||||
['a', '1', 'a'],
|
||||
['b', '2', 'b'],
|
||||
['c', '3', 'c'],
|
||||
['d', '4', 'd']
|
||||
]);
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Table borderStyle={{ borderWidth: 1, borderColor: '#C1C0B9' }}>
|
||||
{/* table header row with buttons */}
|
||||
<Row
|
||||
data={tableHead}
|
||||
style={styles.header}
|
||||
textStyle={styles.headerText}
|
||||
flexArr={[1, 1, 1, 1]}
|
||||
/>
|
||||
|
||||
<TableWrapper style={styles.wrapper}>
|
||||
{/* left column with H1, H2 */}
|
||||
<Col
|
||||
data={sideHead}
|
||||
style={styles.sideHeader}
|
||||
heightArr={[60, 60]}
|
||||
textStyle={styles.sideHeaderText}
|
||||
/>
|
||||
|
||||
<TableWrapper style={styles.tableContentWrapper}>
|
||||
{/* row titles column */}
|
||||
<Col
|
||||
data={rowTitles}
|
||||
style={styles.title}
|
||||
heightArr={[30, 30, 30, 30]}
|
||||
textStyle={styles.titleText}
|
||||
/>
|
||||
|
||||
{/* content cells */}
|
||||
<Rows
|
||||
data={tableData}
|
||||
style={styles.row}
|
||||
flexArr={[1, 1, 1]}
|
||||
textStyle={styles.text}
|
||||
/>
|
||||
</TableWrapper>
|
||||
</TableWrapper>
|
||||
</Table>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
padding: 16,
|
||||
paddingTop: 30,
|
||||
backgroundColor: '#fff'
|
||||
},
|
||||
header: {
|
||||
height: 40,
|
||||
backgroundColor: '#fff'
|
||||
},
|
||||
headerText: {
|
||||
textAlign: 'center',
|
||||
fontWeight: '500'
|
||||
},
|
||||
wrapper: {
|
||||
flexDirection: 'row'
|
||||
},
|
||||
sideHeader: {
|
||||
width: 60,
|
||||
backgroundColor: '#C6F3E0'
|
||||
},
|
||||
sideHeaderText: {
|
||||
textAlign: 'center',
|
||||
fontWeight: '500'
|
||||
},
|
||||
tableContentWrapper: {
|
||||
flex: 1,
|
||||
flexDirection: 'row'
|
||||
},
|
||||
title: {
|
||||
width: 80,
|
||||
backgroundColor: '#f6f8fa'
|
||||
},
|
||||
titleText: {
|
||||
textAlign: 'left',
|
||||
paddingLeft: 5
|
||||
},
|
||||
row: {
|
||||
height: 30
|
||||
},
|
||||
text: {
|
||||
textAlign: 'center'
|
||||
},
|
||||
btn: {
|
||||
width: 58,
|
||||
height: 18,
|
||||
backgroundColor: '#c8e1ff',
|
||||
borderRadius: 2,
|
||||
alignSelf: 'center'
|
||||
},
|
||||
btnText: {
|
||||
textAlign: 'center',
|
||||
fontSize: 12
|
||||
}
|
||||
});
|
||||
|
||||
export default ExampleFive;
|
||||
```
|
||||
<img src="./assets/tabeller_sheetjs_fetch_example.png" width="500"/>
|
||||
|
||||
---
|
||||
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 49 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 31 KiB |
BIN
assets/tabeller_example_four.png
Normal file
BIN
assets/tabeller_example_four.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.7 KiB |
BIN
assets/tabeller_example_three.png
Normal file
BIN
assets/tabeller_example_three.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.1 KiB |
BIN
assets/tabeller_scrollable_sticky_1st_column.webp
Normal file
BIN
assets/tabeller_scrollable_sticky_1st_column.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
assets/tabeller_scrollable_table.png
Normal file
BIN
assets/tabeller_scrollable_table.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
BIN
assets/tabeller_sheetjs_fetch_example.png
Normal file
BIN
assets/tabeller_sheetjs_fetch_example.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
@ -43,11 +43,7 @@ export default function App() {
|
||||
<Text style={styles.subheading}>Example Five</Text>
|
||||
<ExampleFive />
|
||||
</View>
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.subheading}>Example Five</Text>
|
||||
<ExampleFive />
|
||||
</View>
|
||||
|
||||
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.subheading}>SheetJS Example</Text>
|
||||
<SheetJSExample />
|
||||
|
||||
@ -8,35 +8,42 @@ export const BasicExample = () => {
|
||||
['GeorgeW Bush', '43'],
|
||||
['Barack Obama', '44'],
|
||||
['Donald Trump', '45'],
|
||||
['Joseph Biden', '46'],
|
||||
['Joseph Biden', '46']
|
||||
];
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Table borderStyle={{ borderWidth: 1 }}>
|
||||
<Row data={tableHead} style={styles.head} textStyle={styles.headText} />
|
||||
<Rows data={tableData} textStyle={styles.text} />
|
||||
<Row
|
||||
data={tableHead}
|
||||
style={styles.head}
|
||||
textStyle={styles.headText}
|
||||
/>
|
||||
<Rows
|
||||
data={tableData}
|
||||
textStyle={styles.text}
|
||||
/>
|
||||
</Table>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
padding: 16,
|
||||
paddingTop: 30,
|
||||
backgroundColor: '#fff',
|
||||
backgroundColor: '#fff'
|
||||
},
|
||||
head: {
|
||||
height: 44,
|
||||
backgroundColor: '#C6F3E0',
|
||||
backgroundColor: '#C6F3E0'
|
||||
},
|
||||
text: {
|
||||
textAlign: 'center',
|
||||
padding: 5,
|
||||
padding: 5
|
||||
},
|
||||
headText: {
|
||||
textAlign: 'center',
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
});
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
});
|
||||
Binary file not shown.
Loading…
Reference in New Issue
Block a user