Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@opuscapita/excel-service

Package Overview
Dependencies
Maintainers
29
Versions
11
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@opuscapita/excel-service

OpusCapita JS Excel Service

  • 1.0.6
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
0
decreased by-100%
Maintainers
29
Weekly downloads
 
Created
Source

excel-service

Description

Excel service contains a react component for button to open import file window and JS methods to export data to Excel and import data from Excel

Installation

It seems, that npm handles xlsx and xlsx-styles as different versions of the same component. But xlsx-style requires xlsx to be installed in the same node module tree folder with it. In order to make that happen, please follow the instructions below.

Add

externals: [
  { './cptable': 'var cptable' },
]

to webpack.config.js and install

npm install --save file-saver xlsx xlsx-styles @opuscapita/excel-service

It seems, that npm handles xlsx and xlsx-styles as different versions of the same component. But xlsx-style requires xlsx to be installed in the same node module tree folder with it. In order to make that happen, please follow the instructions below.

If xlsx-styles is installed into node_modules/@opuscapita/excel-service/node_modules do the following:

  1. Delete package-lock.json
  2. Delete node_modules
  3. Run npm install
  4. Verify that xlsx-styles doesn't exist in node_modules/@opuscapita/excel-service/node_modules and both xlsx and xlsx-styles exist in the root level of the tree. If xlsx is installed into node_modules/@opuscapita/excel-service/node_modules do the above steps for it, but replace xlsx-styles with xlsx.

Demo

View the DEMO

Builds

UMD

The default build with compiled styles in the .js file. Also minified version available in the lib/umd directory.

CommonJS/ES Module

You need to configure your module loader to use cjs or es fields of the package.json to use these module types. Also you need to configure sass loader, since all the styles are in sass format.

API FileInputLabel

Prop nameTypeDefaultDescription
acceptedFilesstring''String with file formats
label[element, string]'Select file'Label for the button
onChangefunction() => {}Callback on file import

API Excel

MethodInputDescription
exportToExceldata :: List, columns :: array of objects, fileName :: string (optional), digits :: [number, array] (optional), visibleColumns :: ListExports data with specified columns to an Excel file.
importFromExcelfiles :: array, callback :: functionImports data from an Excel file. Use alert callabck for a failed import operation.
onLoadCallbacke :: event object, columns :: array of objects, visibleColumns :: List (optional)Callback on data import
exportSheetsToExcelsheets :: array of Sheet, fileName :: stringExports data with specified columns to an Excel file.
Sheet
Prop nameTypeDefaultDescription
columnsarray of Columns or arrays[]Column headers. In case of one column hedaer row, array contains Column objects, and in case of several column header rows, array contains arrays of Column objects.
dataarray of arrays or objects[]Either array of arrays, which contains objects, with value prop (to be used when no column headers). Or array of (row) objects, which contains props, which match to column valueKeyPath props values.
dataStyleobjectStyle for data, for more information refer to [xlsx-styles cell style syntax] (https://www.npmjs.com/package/xlsx-styles#cell-styles)
formatterfunctionFormatting function for data values
namestring'Sheet x', where x is sheet's order numberSheet's name
noBordersbooleanfalseTrue, if cell borders
rowsarray of Rows[]Row header.
Column
Prop nameTypeDefaultDescription
headerstringColumn header label
mergenumberCount of cells to be merged
valueKeyPatharraypath to column value
valueOptionsobjectIf valueOptions.multiplier is defined for numeric column, then each values in that column are multiplied by the multiplier
Row
Prop nameTypeDefaultDescription
headerstringRow header label

Code example

import React from 'react';
import { fromJS } from 'immutable';
import { Button, ControlLabel, Grid, Row, Col } from 'react-bootstrap';

import { Excel, FileInputLabel } from '@opuscapita/excel-service';

export default class ExampleView extends React.PureComponent {
  constructor(props) {
    super(props);
    this.columns = this.initializeColumns();
    this.state = { data: this.initializeData() };
  }

  initializeColumns = () => ([
    {
      header: 'String',
      valueKeyPath: ['string'],
      width: 200,
    },
    {
      header: 'Number',
      valueKeyPath: ['number'],
      width: 200,
    },
    {
      header: 'Float',
      valueKeyPath: ['float'],
      width: 200,
    },
  ])

  initializeData = () => {
    const data = [];
    for (let i = 0; i < 10; i += 1) {
      data.push({ string: `Item ${i}`, number: i, float: `${i}.00` });
    }
    return data;
  }

  readExcelData = (e) => {
    const data = Excel.onLoadCallback(e, this.columns);
    this.setState({ data });
  }

  handleExportToExcelClick = () => {
    Excel.exportToExcel(fromJS(this.state.data), this.columns, 'ExampleExport');
  }

  handleImportFromExcelClick = (e) => {
    Excel.importFromExcel(e.target.files, this.readExcelData);
  }

  render() {
    return (
      <Grid fluid>
        <Row>
          {this.columns.map(column => (
            <Col xs={4} key={column.header}>
              <ControlLabel>
                {column.header}
              </ControlLabel>
            </Col>
          ))}
        </Row>
        {this.state.data.map(row => (
          <Row key={row.number}>
            <Col xs={4}>
              {row.string}
            </Col>
            <Col xs={4}>
              {row.number}
            </Col>
            <Col xs={4}>
              {row.float}
            </Col>
          </Row>
        ))}
        <Row>
          <Col xs={12}>
            <Button onClick={this.handleExportToExcelClick}>
              Export to Excel
            </Button>
          </Col>
        </Row>
        <Row>
          <Col xs={12}>
            <Button>
              <FileInputLabel
                acceptedFiles=".xlsx"
                label="Import from Excel"
                onChange={this.handleImportFromExcelClick}
              />
            </Button>
          </Col>
        </Row>
      </Grid>
    );
  }
}

FAQs

Package last updated on 13 Nov 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc