add headers in columns in react native table using SheetJS js-xlsx

Question

I have convertd and write the xlsx file of my table data. I have used react-native-table component library to create table and use SheetJS js-xlsx library for convert and write the file in xlsx format. I have write the file but i am unable to append my headers on the xlsx file. so how can do it. here i am leaving my code so, please suggest the solution. please help me to solve it.

Here Code:

import XLSX from 'xlsx';
import RNFS from 'react-native-fs';
import React, {Component} from 'react';
import {
  StyleSheet,
  Text,
  Button,
  Alert,
  ScrollView,
  TouchableWithoutFeedback,
} from 'react-native';
import {Table, Row, Rows, TableWrapper} from 'react-native-table-component';
import {writeFile, DocumentDirectoryPath, downloadFile} from 'react-native-fs';
const directoryPath = RNFS.ExternalStorageDirectoryPath + '/';

const data = {
  headers: ['Name', 'Country', 'City', 'Mobile', 'Salary'],

  rows: [
    ['John', 'America', 'Newyork', '123', '$22'],
    ['Mark', 'Canada', 'Toronto', '056', '$8965'],
    ['David', 'United Kingdom', 'London', '242', 'S23'],
    ['Ravi', 'India', 'Delhi', '8956', '$32'],
  ],
};
const make_cols = (refstr) =>
  Array.from({length: XLSX.utils.decode_range(refstr).e.c + 1}, (x, i) =>
    XLSX.utils.encode_col(i),
  );
export default class SheetComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      cols: make_cols('A1:C2'),
    };

    this.dataExport = this.dataExport.bind(this);
  }

  componentDidMount() {

  }

  dataExport() {
    const ws = XLSX.utils.aoa_to_sheet(data.rows);

    const wb = XLSX.utils.book_new();

    //console.log('workbook', wb);
    XLSX.utils.book_append_sheet(wb, ws, 'User List');

    const wbout = XLSX.write(wb, {type: 'binary', bookType: 'xlsx'});
    //console.log('wbout', wbout);

    //const file = directoryPath + 'customer.xlsx';

    let path = `${RNFS.ExternalStorageDirectoryPath}/VcraftApp`;
    RNFS.mkdir(path);
    const vcraftFile = path + '/userFile.xlsx';

    RNFS.writeFile(vcraftFile, wbout, 'ascii')
      .then((res) => {
        Alert.alert('exportFile success', 'Exported to ' + vcraftFile);
      })
      .catch((err) => {
        Alert.alert('exportFile Error', 'Error ' + err.message);
      });
  }

  render() {
    return (
      <ScrollView contentContainerStyle={styles.container} vertical={true}>
        <Text style={styles.welcome}> </Text>

        <Text style={styles.instructions}>Export Data</Text>
        <Button
          onPress={this.dataExport}
          title="Export data to XLSX"
          color="green"
        />

        <Text style={styles.instructions}>Table Data</Text>

        <ScrollView style={styles.table} horizontal={true}>
          <Table style={styles.table}>
            <TableWrapper>
              <Row
                data={this.state.cols}
                style={styles.thead}
                textStyle={styles.text}
                flexArr={[1]}
              />
            </TableWrapper>
            <TouchableWithoutFeedback>
              <ScrollView vertical={true}>
                <TableWrapper>
                  <Rows
                    data={data.rows}
                    style={styles.tr}
                    textStyle={styles.text}
                    flexArr={[1]}
                  />
                </TableWrapper>
              </ScrollView>
            </TouchableWithoutFeedback>
          </Table>
        </ScrollView>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  instructions: {textAlign: 'center', color: '#333333', marginBottom: 5},
  thead: {height: 40, backgroundColor: 'skyblue'},
  tr: {height: 30},
  text: {marginLeft: 5},
  table: {width: '100%'},
});

add headers in columns in react native table using SheetJS js-xlsx

0 Answers0