diff --git a/README.md b/README.md
index 4886e40..dd4e8cc 100644
--- a/README.md
+++ b/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"/>
 
 ---
 
diff --git a/assets/tabeller_basic_table.png b/assets/tabeller_basic_table.png
index ea5bbbc..1abd931 100644
Binary files a/assets/tabeller_basic_table.png and b/assets/tabeller_basic_table.png differ
diff --git a/assets/tabeller_example_five.png b/assets/tabeller_example_five.png
index e78fead..e53d0b7 100644
Binary files a/assets/tabeller_example_five.png and b/assets/tabeller_example_five.png differ
diff --git a/assets/tabeller_example_four.png b/assets/tabeller_example_four.png
new file mode 100644
index 0000000..cc21476
Binary files /dev/null and b/assets/tabeller_example_four.png differ
diff --git a/assets/tabeller_example_four.webp b/assets/tabeller_example_four.webp
deleted file mode 100644
index fe220bc..0000000
Binary files a/assets/tabeller_example_four.webp and /dev/null differ
diff --git a/assets/tabeller_example_three.png b/assets/tabeller_example_three.png
new file mode 100644
index 0000000..1f3afb3
Binary files /dev/null and b/assets/tabeller_example_three.png differ
diff --git a/assets/tabeller_example_three.webp b/assets/tabeller_example_three.webp
deleted file mode 100644
index c9a70aa..0000000
Binary files a/assets/tabeller_example_three.webp and /dev/null differ
diff --git a/assets/tabeller_scrollable_sticky_1st_column.webp b/assets/tabeller_scrollable_sticky_1st_column.webp
new file mode 100644
index 0000000..265196d
Binary files /dev/null and b/assets/tabeller_scrollable_sticky_1st_column.webp differ
diff --git a/assets/tabeller_scrollable_table.png b/assets/tabeller_scrollable_table.png
new file mode 100644
index 0000000..6e3e348
Binary files /dev/null and b/assets/tabeller_scrollable_table.png differ
diff --git a/assets/tabeller_scrollable_table.webp b/assets/tabeller_scrollable_table.webp
deleted file mode 100644
index f526f08..0000000
Binary files a/assets/tabeller_scrollable_table.webp and /dev/null differ
diff --git a/assets/tabeller_sheetjs_fetch_example.png b/assets/tabeller_sheetjs_fetch_example.png
new file mode 100644
index 0000000..02ab00c
Binary files /dev/null and b/assets/tabeller_sheetjs_fetch_example.png differ
diff --git a/example/src/App.tsx b/example/src/App.tsx
index a7b3549..5a95384 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -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 />
diff --git a/example/src/BasicExample.tsx b/example/src/BasicExample.tsx
index 663ef4f..af4f8ec 100644
--- a/example/src/BasicExample.tsx
+++ b/example/src/BasicExample.tsx
@@ -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'
+  }
+});
\ No newline at end of file
diff --git a/react-native-tabeller-0.1.0.tgz b/react-native-tabeller-0.1.0.tgz
index 01683e0..5095689 100644
Binary files a/react-native-tabeller-0.1.0.tgz and b/react-native-tabeller-0.1.0.tgz differ