@slickgrid-universal/custom-footer-component

Slick Custom Footer Component - Vanilla Implementation of a Custom Footer Component


Keywords
datagrid, datatable, graphql, grid, javascript, monorepo, odata, slickgrid, typescript
License
MIT
Install
npm install @slickgrid-universal/custom-footer-component@1.2.4

Documentation

Slickgrid-Universal

License: MIT TypeScript lerna--lite NPM downloads npm

Actions Status Cypress jest codecov

Documentation

📘 Documentation website powered by GitBook

Live Demo

Live Demo website

Open in Codeflow

Description

This is a monorepo project (using pnpm workspaces) which is regrouping a few packages under a single repository. It originally required SlickGrid as a dependency but that is no longer the case and is now a standalone library. The main goal of this project is to create a common repo that includes all Editors, Filters, Extensions and Services that could be used by any Framework (it is framework agnostic). The original SlickGrid is like an IKEA product that requires assembling everything yourself, the goal of the project here is to offer an all assembled product including a set of built-in Editors, Filters, Formatters and some optional packages like OData, GraphQL, ... and SlickGrid simply did not offer that by default. See below for more project details.

Why create this monorepo?

Below is a list of reasons why this project was created and why it is a monorepo project:

  1. it removed a lot of duplicate code that were common in both Angular-Slickgrid and Aurelia-Slickgrid libraries
    • prior to creating this monorepo, these 2 libs had ~90% of TypeScript code in common which was not very DRY, it is also a lot easier to maintain by pushing fixes in 1 common lib (this one here).
  2. decoupled a few Services that are not required by every project (OData, GraphQL, Export to CSV, Export to Excel, Composite Editor, RxJS, ...)
  3. framework agnostic, it could be implemented in many different frameworks (if you are interested in adding a different framework port that is not listed in the table below, please open a new Discussion)
    • you can use it in plain JavaScript (ES6) or TypeScript, on our side we use it with plain JS (ES6) in our Salesforce environment with LWC (Lightning Web Component)

Latest News & Releases

Check out the Releases section for all the latest News & Version Releases.

Like my work?

You could ⭐ the lib and perhaps support me with cafeine . Thanks in advance.

Buy Me a Coffee at ko-fi.com

Live Demos & Available Framework Ports

The GitHub live demo shows 2 different UI themes (Material Design / Salesforce), but you could also choose the Bootstrap theme which is demoed in other frameworks with available links shown in the table below. Also note that these live demos are using Bootstrap and Bulma, but in theory you could use any UI libraries. The project tries to be as much agnostic as possible and it does so by providing a ton of CSS/SASS variables which are available to customize it the way you want.

Available Framework Ports

Project Repo Live Demo UI used Description
Angular-Slickgrid demo Bootstrap for Angular framework
Aurelia-Slickgrid demo Bootstrap for Aurelia framework
Slickgrid-React demo Bootstrap for React framework
Slickgrid-Universal-WebPack-Demo demo Bulma Slickgrid-Universal demo with WebPack & TypeScript (demo purposes only)
Slickgrid-Universal-Vite-Demo demo Bulma Slickgrid-Universal demo with Vite & TypeScript (demo purposes only)

The Slickgrid-Universal live demo is a Vanilla Implementation (which is not associated to any framework) built with ViteJS (originally WebPack) and is also used to run the E2E tests with Cypress for testing all UI functionalities. The Vanilla-force-bundle, which extends the vanilla-bundle package is also what we use in our SalesForce implementation (with Lightning Web Component), which was the original reason to create this monorepo library and avoid code duplication.

Fully Tested with Jest (Unit Tests) - Cypress (E2E Tests)

Slickgrid-Universal has close to 100% Unit Test Coverage, almost 5,000 Jest unit tests and also +550 Cypress E2E tests to cover all Examples and most UI functionalities (each framework implementation also have an additional 600 tests), the goal is to test everything and offer peace of mind that all the code and PR changes are fully tested and that we have tests to cover them.

Available Public Packages

Package Name Version Description Changes
@slickgrid-universal/common npm commonly used Formatters/Editors/Filters/Services/... changelog
@slickgrid-universal/binding npm basic Binding Engine & Helper changelog
@slickgrid-universal/event-pub-sub npm basic PubSub Service using JS Events changelog
@slickgrid-universal/composite-editor-component npm Composite Editor Modal Component changelog
@slickgrid-universal/custom-footer-component npm Custom Footer Component for the grid changelog
@slickgrid-universal/custom-tooltip-plugin npm Custom Tooltip (plugin) changelog
@slickgrid-universal/empty-warning-component npm simple Empty Data Warning Component changelog
@slickgrid-universal/pagination-component npm simple Pagination Component changelog
@slickgrid-universal/excel-export npm Export to Excel Service (xls/xlsx) changelog
@slickgrid-universal/text-export npm Export to Text File Service (csv/txt) changelog
@slickgrid-universal/graphql npm GraphQL Query Service (Filter/Sort/Paging) changelog
@slickgrid-universal/odata npm OData Query Service (Filter/Sort/Paging) changelog
@slickgrid-universal/row-detail-view-plugin npm Row Detail View (plugin) changelog
@slickgrid-universal/rxjs-observable npm RxJS Observable Service Wrapper changelog
@slickgrid-universal/utils npm Common JS Utils changelog
@slickgrid-universal/vanilla-bundle npm Vanilla TypeScript/ES6 implementation changelog
@slickgrid-universal/vanilla-force-bundle npm Vanilla TypeScript/ES6 for Salesforce implementation changelog

Installation

NOTE: the installation instructions below are only required if you want to contribute to this project, if on the other hand you just want to download a quick Slickgrid-Universal demo, then I would suggest to take a look at Slickgrid-Universal Vite Demo or Slickgrid-Universal WebPack Demo.

To get started and do development with this monorepo, you will need to clone the repo and follow the steps shown below. You must be at the root of the project to run the following commands. This project also requires pnpm.

  1. pnpm installation

This project uses pnpm workspaces, you can install pnpm by picking 1 of these 2 choices:

a. following their installation

b. or install pnpm via Node corepack

corepack enable

# optionally update pnpm to latest
corepack prepare pnpm@latest --activate
  1. Run Dev (Vanilla Implementation)

There is a Vanilla flavour implementation of this monorepo, vanilla means that it is not associated to any framework and is written in plain TypeScript without being bound to any framework. The implementation is very similar to Angular and Aurelia. It could be used as a guideline to implement it for other framework ports.

pnpm run dev
  1. Build (bundle)

You also need to run a full build if you want to run the Jest unit tests

pnpm run bundle

Tests

You must go through Installation Steps 1-2 (or 1,3) prior to running the Jest unit tests OR steps 1-2 when running Cypress E2E tests.

Jest Unit Tests

To run all unit tests (with Jest), you can run one of the following commands (make sure that steps 1,3 were executed prior to running this command)

pnpm run test

# or run Jest in watch mode
pnpm run test:watch

Cypress E2E Tests

To run all E2E tests (with Cypress), you can run one of the following commands (make sure that steps 1,2 were executed prior to running this command)

# will open the Cypress GUI
pnpm run cypress

# or run it in the shell (like a CI/CD would)
pnpm run cypress:ci

Sponsors