@slickgrid-universal/pagination-component

Slick Pagination Component - Vanilla Implementation of a Pagination Component


Keywords
datagrid, datatable, graphql, grid, javascript, jquery, monorepo, odata, slickgrid, typescript
License
MIT
Install
npm install @slickgrid-universal/pagination-component@1.2.6

Documentation

Slickgrid-Universal

License: MIT TypeScript lerna NPM downloads

Actions Status Cypress.io jest codecov

This is a monorepo project (using Lerna) which is regrouping a few packages under a single repository. It is using SlickGrid (more specifically the 6pac/SlickGrid fork) behind the scene (there is no need to rewrite the core library itself, in other words this is a wrapper library). The main goal of this library 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). It's also a good opportunity to decouple some features/services that not every project require at all time, this will also help in getting smaller bundle size depending on which features (packages) you use. For example, not every project requires backend services (OData, GraphQL) and export services (Excel Export, Text Export), which is why they are better handled with a monorepo structure.

Latest News & Releases

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

Demo page

The GitHub demo page uses 2 different themes (Material Design / Salesforce) but you could also use Bootstrap theme which is demoed in other frameworks.

Why create this monorepo?

You might be wondering why was this monorepo created? Here are a few of the reasons:

  1. it removes a lot of duplicate code that exist in both Angular-Slickgrid and Aurelia-Slickgrid (these libs have over 90% of code in common and that is not very DRY, we should only push fixes in 1 place instead of multiple places).
  2. decouple some Services that should not be required neither imported for every project (OData, GraphQL, Export to File, Export to Excel, RxJS, ...)
  3. framework agnostic, it could be implemented in many more frameworks (if you're interested in adding a port for any other framework, 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)

Frameworks using this monorepo

  • Aurelia-Slickgrid starting with version >=3.x is now using Slickgrid-Universal
  • Angular-Slickgrid starting with version >=3.x is now using Slickgrid-Universal
  • Vanilla bundle is to use it with plain JavaScript or TypeScript without targeting any particular framework.

The Vanilla Implementation (not associated to any framework) is built with WebPack and is also used to test all the UI functionalities Cypress (E2E tests). The Vanilla-force-bundle, which extends the vanilla-bundle package is what we use in our SalesForce implementation (with Lightning Web Component), hence the creation of this monorepo library.

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

Slickgrid-Universal has 100% Unit Test Coverage, we are talking about +15,000 lines of code (+3,700 unit tests) that are fully tested with Jest. There are also +400 Cypress E2E tests to cover all Examples and most UI functionalities (there's also an additional +500 tests in Aurelia-Slickgrid)

Available Demos

Package or Lib Name Description
Angular-Slickgrid Angular-Slickgrid for Angular framework
Aurelia-Slickgrid Aurelia-Slickgrid for Aurelia framework
slickgrid-universal/webpack-demo-vanilla-bundle standalone package written in plain TypeScript for demo and UI testing (do not use in production, this is only for demo/testing purpose).

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 (support Filter/Sort/Pagination) changelog
@slickgrid-universal/odata npm OData Query Service (support Filter/Sort/Pagination) 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/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 use Slickgrid-Universal then take a look at webpack-demo-vanilla-bundle

To get going and do development with this monorepo, you will need to clone the repo and then follow the steps below.

  1. Install npm packages with Yarn classic 1.x since this lib uses Yarn version 1.x Workspaces and so you need to use Yarn to install all packages
yarn install
  1. Lerna Bootstrap

Run it only once, this will install all dependencies and add necessary monorepo symlinks

yarn run bootstrap
  1. Build (bundle)

To get started you must run at least once the initial TS build so that all necessary dist are created and bundled for all the Lerna packages to work together.

yarn run bundle

NOTE: this will also have to be re-executed if you change any of the interfaces in the common package (since that package is a dependency of all other packages).

  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 with other frameworks.

yarn run dev:watch

Tests

You must go through Installation Steps 1-3 prior to run the unit tests OR Steps 1-4 when running E2E tests.

Jest Unit Tests

To run all unit tests (with Jest), you can run these commands

yarn run test

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

Cypress E2E Tests

To run all E2E tests (with Cypress), you can run these commands

# will open the Cypress UI
yarn run cypress

# or run in the shell like a CI/CD would
yarn run cypress:ci