npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2025 – Pkg Stats / Ryan Hefner

@sg-components/sg-spreadsheet

v0.0.8

Published

<div id="top"></div> <!-- PROJECT LOGO --> <br /> <div align="center"> <a href="https://github.com/othneildrew/Best-README-Template"> <img src="./docs/assets/img/seagage-logo.png" alt="Logo" width="80" height="80"> </a>

Readme

About The Project

Product Name Screen Shot

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.

Components hierarchy Screen Shot

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.

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