@sg-components/sg-spreadsheet v0.0.8

About The Project

CGC-Spreadsheet is a Svelte library for building spreadsheets capable of processing data and performing operations according to data entered by the user. Its operation is based on an initial configuration which can later be replaced by an updated state of information.

• Support for basic operators: +, -, *, /.

• Support for next formulas:

  • =SUM(A1:A5)
  • =AVG(A1:A5)
  • =SWITCH(A1:"MIKE":4:"MARIO":3:"PAOLA":2:"Default")
  • =ABS((A1-B1)/A1)*100
  • =IF(C20>C21,-C20+C21,0)
  • =IFERROR(D22/C22-1,0)
  • =ROUNDUP(C9/C13,0)
  • =ROUNDDOWN(C9/C13,0)
  • =ROUND(A1+A2,0)
  • =ROUND(A1-A2,0)
  • =PRODUCT(C14:C17)
  • =SUM(A:A) or SUM(2:2) (the total sum of column or row)

• Cell properties
  • Max characters
  • Read only state
  • Custom styles (text color, background color, font size, borders)

• Table properties
  • Hide rows and cols. User should be able to hide or show the row or column headers in for the final user, that means that the user can’t see the cols letters and rows numbers.
  • Read only. User should be able to show the table to the end-user as read only.
  • Max rows. User should be able to assign a maximum number of rows.
  • Min rows. User should be able to assign a minimum number of rows.
  • Add/Remove rows. The end-user should be able to add or remove rows even if the rows have locked cells or contain formulas in it.
  • Add rows label. User should be able to custom the label button to add more rows.
  • Fixed rows. The end-user should be able to fix a specific number of rows for the header and footer in the table. These fixed rows couldn’t be removed.
  • Conditional format. User should be able to apply a conditional format to the cell. (Text and Background color)
    • ´< Less Than´
    • ´<= Less or Equal Than´
    • ´= Equal Than´
    • ´!= Different Than´
    • ´> Greater Than´
    • ´>= Greater or Equal Than´
  • HTML or Financial mode. Html mode is the default option, financial mode shows the blue color text for the unlocked cells and black color for the locked cells.

• Table tools (header):
  • Bold, Italic
  • Size, Background, and font color
  • Borders,
  • Text alignment,
  • Merge and split
  • Text format
  • Decimals.

• User should be able to change the width of columns through the context menu and drag and drop columns.

• User should be able to link one table to another by adding the table id and the cell number, structure example:{KYW9KUP982:C1}

• User should be able to perform operations with references from other tables using the operators or formulas supported by the table.

• User can use this functionality when the tables are in the same page or different pages.

• User should be able to link a Table component cell to a Text input through the source id component, structure example: KYW9KUP982:A1, this is the Table component id and the cell number.

• User should be able to link a Text input with a Table component, you can show the information added in the Text input to Table component cell, structure example: {KYW9KUP988}, this is Text input Id.

• The end-user should be able to remove or add rows

• The new cells added should take the values of the last one, that means, if the last row has a specific format or style, the application should take them and should add them to the new row. This case applies to formulas too, the difference is that the formula would be updated with the corresponding row number.

• System should take the value from the builder if the cell is locked.

• If the cell isn't locked the system should take the state's value.

• If the cell doesn't have a state's value, the system should search the value in the page content.

• Cells with formulas and without value or result should show an error.

• The System should take the value from the builder if the cell is locked.

• The Builder values should be shown first.

• If the cell is not blocked and doesn't contain formulas, the values should be able to be overwritten in the Runtime (states).

• The origin row shouldn't be deleted (minimum 1 row).

• It should not be possible to delete the formulas in Runtime. done

• If the option to add and remove rows is enabled, it should be possible to delete rows with formulas.

For the construction of the library, Svelte Kit is used, which provides a set of tools capable of generating installable libraries as packages in various projects. Typescript has been used for a more robust typing language and sass for a better abstraction in the implementation of styles throughout the component. All this based on npm, which is responsible for managing the necessary packages so that both the project's dependencies and the project itself work correctly under the JavaScript development environment.

• Npm

• Svelte.js

• SvelteKit

• Typescript

• SASS

Getting Started

This is an example of how you may give instructions on setting up your project locally. To get a local copy up and running follow these simple example steps.

Prerequisites

This is an example of how to list things you need to use the software and how to install them.

• npm

  npm install npm@latest -g

Installation

Below is an example of how you can instruct your audience on installing and setting up your app. This template doesn't rely on any external dependencies or services.

npm install sg-spreadsheet

Usage

Here will be placed example codes