open-index/open-npm huggingface dataset:
npm package: @slick-for/di
Description: Dependency Injection Framework, works with providers that are of an interface
Author: Shavauhn Gabay
Latest version: 1.0.4

# Slick For DI


This is a project that enabled dependency resolution, while allowing resolving promises.


Here is a quick overview of how it works.



```ts
import Container from "@slick-for/di"

const container = new Container();


class Logger {

    constructor(private transport:Transport){

    }

    info(message){
        let log = {
            level:"info",
            message
        }


        this.transport.send(log);
    }
}


class Transport {
    send(message){
        ...
    }
}


container.add(Transport)
container.add(Logger)




container.get(Logger)
```

This is a very trivial case where it seems very simple to solve.
But once you have 10s of classes this now becomes a job of creating factories
to create all of these instances.

It is a lot of plumbing and will need a solution that wires it all up for you.

Let's look at another example.


```ts


class UserService {
    
    constructor(@AS('api') private api:string){
        
    }



    getStatus(){
        fetch(this.api)
        ...
    }
}

const client_version = 1.2;

const ApiEndPointProvider = {
    provide:"api",
    async useFactory(){

        let res = await fetch("/get/endpoint?client="+client_version)
        let json = await res.json();

        return json.endpoint;

    }
}

//after adding to container


container.get(UserService).
then(userservice=>{

    //you have everything wired up.

})
```


One thing that is difficult and could get out of hand is managing async code,
and building up all of the dependencies required.

A dependencies injection framework job is to solve all of that.
You describe what you need and the runtime will simply resolve it and all of it's dependencies,
while resolving promises if needed.

These cases are quite trivial, but picture a scenario where there are multiple
files, multiple dependencies, different files requiring the same instances,

eg a single DB connection, but it's shared with multiple of classes that require that instance.


This project is in development but the base implementation is working.

It needs some polishing however to make it complete.
npm package: @slick-ui/core
Description: React Native UI Library
Author: AshwithJoylan
Latest version: 0.2.4

# @slick-ui/core

React Native UI Lirary

## Installation

```sh
npm install @slick-ui/core
```

## Usage

```js
import {} from "@slick-ui/core";

// ...

```

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT
npm package: @slick-ui/mentions
Description: A mentions input library
Author: ashwith00@gmail.com
Latest version: 0.1.2

# @slick-ui/mentions

A mentions input library

## Installation

```sh
npm install @slick-ui/mentions
```

## Usage

```js
import Mentions from "@slick-ui/mentions";

// ...

const result = await Mentions.multiply(3, 7);
```

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT
npm package: @slick_kilmister/command-processor
Description: Ultra simple helper that turns command line arguments into an easy-to-use options-object
Author: kilian kilian@catsoft.ch
Latest version: 1.1.0

<a href="https://dev.to/kiliankilmister">
  <img src="https://d2fltix0v2e0sb.cloudfront.net/dev-badge.svg" alt="DEV.to Profile" height="30" width="30">
</a>
npm package: @slick_kilmister/find-and-tag
Author: Kilian Hefti
Latest version: 1.0.3

# Code Tagger


## Usage

Install via:

```sh
npm install -g @slick_kilmister/find-and-tag
```

Run via:

```sh
findandtag -i <input path> -o <output path>
```

Script logs any unknown types and non-declared variables to `stdout`.


## Actions

1. process all declarations
   - `a`-prefix for function arguments (only works if the function arguments are
     on the same line as the `FUNCTION`-keyword).
   - `l`-prefix for formal declarations
1. process all references
   - does a lookup to any processed declaration
   - logs any unknown variables
     - unknowns are re-inserted unchanged


### Limitations

- Is *not* context aware; every variable is treated like a global.
- Can't handle multiple declarations with identical name but
  different type.
npm package: @slick_kilmister/node-dev-config
Description: personal node.js dev-configuration
Author: Slick Kilmister
Latest version: 1.0.0

# **GET A PROPER TEMPLATE**

Using the advantages of JavaScript on the Command Line level with Node.js

## Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

### Prerequisites

What things you need to install the software and how to install them

```
Give examples
```

### Installing

A step by step series of examples that tell you how to get a development env running

Say what the step will be

```
Give the example
```

And repeat

```
until finished
```

End with an example of getting some data out of the system or using it for a little demo

## Running the tests

Explain how to run the automated tests for this system

### Break down into end to end tests

Explain what these tests test and why

```
Give an example
```

### And coding style tests

Explain what these tests test and why

```
Give an example
```

## Deployment

Add additional notes about how to deploy this on a live system

## Built With

- [Dropwizard](http://www.dropwizard.io/1.0.2/docs/) - The web framework used
- [Maven](https://maven.apache.org/) - Dependency Management
- [ROME](https://rometools.github.io/rome/) - Used to generate RSS Feeds

## Contributing

Please read [CONTRIBUTING.md](https://gist.github.com/PurpleBooth/b24679402957c63ec426) for details on our code of conduct, and the process for submitting pull requests to us.

## Versioning

We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/your/project/tags).

## Authors

- **Billie Thompson** - _Initial work_ - [PurpleBooth](https://github.com/PurpleBooth)

See also the list of [contributors](https://github.com/your/project/contributors) who participated in this project.

## License

This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details

## Acknowledgments

- Hat tip to anyone whose code was used
- Inspiration
- etc
npm package: @slick_kilmister/schema
Description: Ultra simple helper that turns command line arguments into an easy-to-use options-object
Author: kilian kilian@catsoft.ch
Latest version: 1.1.0

<a href="https://dev.to/kiliankilmister">
  <img src="https://d2fltix0v2e0sb.cloudfront.net/dev-badge.svg" alt="DEV.to Profile" height="30" width="30">
</a>
npm package: @slickcomment/slickcomment-react
Description: React wrapper for SlickComment widgets
Author: SlickComment.com
Latest version: 1.3.2

# SlickComment React Component

## Installation

Using npm:

`npm install --save slickcomment-react`

Using yarn:

`yarn add slickcomment-react`

## Usage:

```
import SlickComment from 'slickcomment-react';

function App() {
    return (
        <SlickComment.WidgetDiscussion
            config={{
                siteId: 'REPLACE WITH YOUR VALUE',
                pageId: 'REPLACE WITH YOUR VALUE',
                pageUrl: 'REPLACE WITH YOUR VALUE',
            }}
        />
        
        <SlickComment.WidgetUserComments
            config={{
                siteId: 'REPLACE WITH YOUR VALUE',
                userSsoId: 'REPLACE WITH YOUR VALUE',
            }}
        />

        <SlickComment.WidgetSiteComments
            config={{
                siteId: 'REPLACE WITH YOUR VALUE',
            }}
        />

        <SlickComment.WidgetModeration
            config={{
                siteId: 'REPLACE WITH YOUR VALUE',
                getUserSsoToken: () => {
                    // TODO: implement this
                }
            }}
        />
    )
}
```
npm package: @slickgrid-universal/angular-row-detail-plugin
Description: Angular Row Detail Plugin for Angular-SlickGrid
Author: Ghislain B.
Latest version: 10.4.2

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)
[![NPM downloads](https://img.shields.io/npm/dy/@slickgrid-universal/angular-row-detail-plugin)](https://npmjs.org/package/@slickgrid-universal/angular-row-detail-plugin)
[![npm](https://img.shields.io/npm/v/@slickgrid-universal/angular-row-detail-plugin.svg?logo=npm&logoColor=fff&label=npm)](https://www.npmjs.com/package/@slickgrid-universal/angular-row-detail-plugin)

## Angular-Slickgrid Row Detail plugin
#### @slickgrid-universal/angular-row-detail-plugin

Angular-Slickgrid Row Detail plugin

### Installation
Follow the instruction provided in the main [README](https://github.com/ghiscoding/slickgrid-universal#installation)
npm package: @slickgrid-universal/aurelia-row-detail-plugin
Description: Aurelia Row Detail Plugin for Aurelia-SlickGrid
Author: Ghislain B.
Latest version: 10.4.0

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)
[![NPM downloads](https://img.shields.io/npm/dy/@slickgrid-universal/aurelia-row-detail-plugin)](https://npmjs.org/package/@slickgrid-universal/aurelia-row-detail-plugin)
[![npm](https://img.shields.io/npm/v/@slickgrid-universal/aurelia-row-detail-plugin.svg?logo=npm&logoColor=fff&label=npm)](https://www.npmjs.com/package/@slickgrid-universal/aurelia-row-detail-plugin)

## Aurelia-Slickgrid Row Detail plugin
#### @slickgrid-universal/aurelia-row-detail-plugin

Aurelia-Slickgrid Row Detail plugin

### Installation
Follow the instruction provided in the main [README](https://github.com/ghiscoding/slickgrid-universal#installation)
npm package: @slickgrid-universal/binding
Description: Simple Vanilla Implementation of a Binding Engine & Helper to add properties/events 2 way bindings
Author: Ghislain B.
Latest version: 10.1.0

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)
[![lerna--lite](https://img.shields.io/badge/maintained%20with-lerna--lite-e137ff)](https://github.com/ghiscoding/lerna-lite)
[![npm](https://img.shields.io/npm/v/@slickgrid-universal/binding.svg)](https://www.npmjs.com/package/@slickgrid-universal/binding)
[![npm](https://img.shields.io/npm/dy/@slickgrid-universal/binding)](https://www.npmjs.com/package/@slickgrid-universal/binding)

## Binding Engine & Helper
#### @slickgrid-universal/binding

A very Simple Vanilla Implementation of a Binding Engine & Helper to add properties/events 2 way bindings. This binding engine is a very simple implementation and is used by simple components like the Custom Footer & Pagination. Again this is a very simple implementation and should not be used with large components but is good enough for small use cases like a footer, pagination and other small ones.

### External Dependencies
- [DOM Purify](https://github.com/cure53/DOMPurify) to sanitize HTML text

### Installation
Follow the instruction provided in the main [README](https://github.com/ghiscoding/slickgrid-universal#installation)
npm package: @slickgrid-universal/common
Description: SlickGrid-Universal Common Code
Author: Ghislain B.
Latest version: 10.4.0

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)
[![lerna--lite](https://img.shields.io/badge/maintained%20with-lerna--lite-e137ff)](https://github.com/ghiscoding/lerna-lite)
[![npm](https://img.shields.io/npm/v/@slickgrid-universal/common.svg)](https://www.npmjs.com/package/@slickgrid-universal/common)
[![npm](https://img.shields.io/npm/dy/@slickgrid-universal/common)](https://www.npmjs.com/package/@slickgrid-universal/common)

## Common Filters/Editors/Extensions/Services
#### @slickgrid-universal/common

This package is regrouping the most common features, extensions, interfaces that can be used by other Frameworks (it is framework agnostic). It includes all Editors, Filters, Formatters, Grouping, Extensions and Services as can be seen below.

### Installation
Go to the root of the repo and follow the instructions provided in the main [README](https://github.com/ghiscoding/slickgrid-universal#installation)

### What is included?
- **Aggregators** (min, max, avg, sum, ...)
- **Editors & Filters** (input, singleSelect, multipleSelect, date, slider, ...)
- **Extensions** (SlickGrid 3rd party controls/plugins)
- **Formatters** (date formats, decimal, dollars, percent, bold, checkmark, ...)
- **Grouping Formatters** (min, max, avg, sum, ...)
- **Services** (filter, pagination, sort, grid state, ...)
- **SortComparers** (date, numeric, string, ...)
npm package: @slickgrid-universal/composite-editor-component
Description: Slick Composite Editor Component - Vanilla Implementation of a Composite Editor Modal Window Component
Author: Ghislain B.
Latest version: 10.4.0

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)
[![lerna--lite](https://img.shields.io/badge/maintained%20with-lerna--lite-e137ff)](https://github.com/ghiscoding/lerna-lite)
[![npm](https://img.shields.io/npm/v/@slickgrid-universal/composite-editor-component.svg)](https://www.npmjs.com/package/@slickgrid-universal/composite-editor-component)
[![npm](https://img.shields.io/npm/dy/@slickgrid-universal/composite-editor-component)](https://www.npmjs.com/package/@slickgrid-universal/composite-editor-component)

## Composite Editor Component
#### @slickgrid-universal/composite-editor-component

Vanilla Bundle implementation of a Composite Editor Modal Window which can do the following
- Create
- Clone (allows you to clone & edit a row, it's like a copy+edit in a single action)
- Edit / Update
- Mass Update Changes
- Mass Selection Changes (similar to Mass Update but only for the selected items/rows)

### Installation
Follow the instruction provided in the main [README](https://github.com/ghiscoding/slickgrid-universal#installation).
npm package: @slickgrid-universal/custom-footer-component
Description: Slick Custom Footer Component - Vanilla Implementation of a Custom Footer Component
Author: Ghislain B.
Latest version: 10.4.0

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)
[![lerna--lite](https://img.shields.io/badge/maintained%20with-lerna--lite-e137ff)](https://github.com/ghiscoding/lerna-lite)
[![npm](https://img.shields.io/npm/v/@slickgrid-universal/custom-footer-component.svg)](https://www.npmjs.com/package/@slickgrid-universal/custom-footer-component)
[![npm](https://img.shields.io/npm/dy/@slickgrid-universal/custom-footer-component)](https://www.npmjs.com/package/@slickgrid-universal/custom-footer-component)

## Custom Footer Component
#### @slickgrid-universal/custom-footer-component

Vanilla Implementation of a Custom Footer Component that can optionally be shown at the bottom of the grid. The default behavior is to show metrics on the right side of the footer while the left side could optionally show row selection count (when that feature is enabled). The default texts for metrics & row selection (when enabled) also have a set of locales that allows you to change the text according to the locale used. Lastly, you could also choose to provide your own custom text/html in both left and/or right side.

### Installation
Follow the instruction provided in the main [README](https://github.com/ghiscoding/slickgrid-universal#installation)
npm package: @slickgrid-universal/custom-tooltip-plugin
Description: A plugin to add Custom Tooltip when hovering a cell, it subscribes to the cell
Author: Ghislain B.
Latest version: 10.4.0

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)
[![lerna--lite](https://img.shields.io/badge/maintained%20with-lerna--lite-e137ff)](https://github.com/ghiscoding/lerna-lite)
[![npm](https://img.shields.io/npm/v/@slickgrid-universal/custom-tooltip-plugin.svg)](https://www.npmjs.com/package/@slickgrid-universal/custom-tooltip-plugin)
[![npm](https://img.shields.io/npm/dy/@slickgrid-universal/custom-tooltip-plugin)](https://www.npmjs.com/package/@slickgrid-universal/custom-tooltip-plugin)

## Custom Tooltip (plugin)
#### @slickgrid-universal/custom-tooltip-plugin

A plugin to add Custom Tooltip when hovering a cell, it subscribes to the cell `onMouseEnter` and `onMouseLeave` events.
The `customTooltip` is defined in the Column Definition OR Grid Options (the first found will have priority over the second)
To specify a tooltip when hovering a cell, extend the column definition like so:

Available plugin options (same options are available in both column definition and/or grid options)

#### Register the plugin
In order to use the Service, you will need to register it in your grid options via the `externalResources` as shown in the Example 2 below.

##### Example 1  - via Column Definition
```ts
this.columns = [
  {
    id: "action", name: "Action", field: "action", formatter: fakeButtonFormatter,
    customTooltip: {
      formatter: tooltipTaskFormatter,
      // ...
    }
  }
];
```

##### OR Example 2 - via Grid Options (for all columns), NOTE: the column definition tooltip options will win over the options defined in the grid options

```ts
import { SlickCustomTooltip } from '@slickgrid-universal/custom-tooltip-plugin';

export class MyExample {
  initializeGrid {
    this.gridOptions = {
      customTooltip: {
        formatter: tooltipTaskFormatter,
        // ...
      },
      externalResources: [new SlickCustomTooltip(), this.excelExportService],
    };
  }
}
```

### Installation
Follow the instruction provided in the main [README](https://github.com/ghiscoding/slickgrid-universal#installation)
npm package: @slickgrid-universal/empty-warning-component
Description: Slick Empty Warning Component - Vanilla Implementation of an Empty Dataset Warning Component
Author: Ghislain B.
Latest version: 10.4.0

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)
[![lerna--lite](https://img.shields.io/badge/maintained%20with-lerna--lite-e137ff)](https://github.com/ghiscoding/lerna-lite)
[![npm](https://img.shields.io/npm/v/@slickgrid-universal/empty-warning-component.svg)](https://www.npmjs.com/package/@slickgrid-universal/empty-warning-component)
[![npm](https://img.shields.io/npm/dy/@slickgrid-universal/empty-warning-component)](https://www.npmjs.com/package/@slickgrid-universal/empty-warning-component)

## Empty Warning Component
#### @slickgrid-universal/empty-warning-component

Vanilla Implementation of an Empty Dataset Warning Component when there is no data available in the grid. This is in summary a very simplified `div` showing a warning message (that can be translated as well) when there are no data to show in the grid.

### Installation
Follow the instruction provided in the main [README](https://github.com/ghiscoding/slickgrid-universal#installation)
npm package: @slickgrid-universal/event-pub-sub
Description: Simple Vanilla Implementation of an Event PubSub Service to do simply publish/subscribe inter-communication while optionally providing data in the event
Author: Ghislain B.
Latest version: 10.3.0

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)
[![lerna--lite](https://img.shields.io/badge/maintained%20with-lerna--lite-e137ff)](https://github.com/ghiscoding/lerna-lite)
[![npm](https://img.shields.io/npm/v/@slickgrid-universal/event-pub-sub.svg)](https://www.npmjs.com/package/@slickgrid-universal/event-pub-sub)
[![npm](https://img.shields.io/npm/dy/@slickgrid-universal/event-pub-sub)](https://www.npmjs.com/package/@slickgrid-universal/event-pub-sub)

## Event PubSub Service
#### @slickgrid-universal/event-pub-sub

A very simple Vanilla Implementation of an Event PubSub Service to do simple publish/subscribe inter-communication while optionally providing data as well.

### Installation
Follow the instruction provided in the main [README](https://github.com/ghiscoding/slickgrid-universal#installation)
npm package: @slickgrid-universal/graphql
Description: GraphQL Service to sync a grid with a GraphQL backend server
Author: Ghislain B.
Latest version: 10.4.0

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)
[![lerna--lite](https://img.shields.io/badge/maintained%20with-lerna--lite-e137ff)](https://github.com/ghiscoding/lerna-lite)
[![npm](https://img.shields.io/npm/v/@slickgrid-universal/graphql.svg)](https://www.npmjs.com/package/@slickgrid-universal/graphql)
[![npm](https://img.shields.io/npm/dy/@slickgrid-universal/graphql)](https://www.npmjs.com/package/@slickgrid-universal/graphql)

## GraphQL Service
#### @slickgrid-universal/graphql

GraphQL Service to sync a grid with an GraphQL backend server, the service will consider any Filter/Sort and automatically build the necessary GraphQL query string that is sent to your GraphQL backend server.

### External Dependencies
No external dependency

### Installation
Follow the instruction provided in the main [README](https://github.com/ghiscoding/slickgrid-universal#installation), you can see a demo by looking at the [GitHub Demo](https://ghiscoding.github.io/slickgrid-universal/#/example10) page.

### Usage
Simply use pass the Service into the `backendServiceApi` Grid Option.

##### ViewModel
```ts
import { GraphqlService, GraphqlServiceApi } from '@slickgrid-universal/graphql';

export class MyExample {
  initializeGrid {
    this.gridOptions = {
      backendServiceApi: {
        service: new GraphqlService(),
        options: {
          datasetName: 'users',
        },
        preProcess: () => this.displaySpinner(true),
        process: (query) => this.getCustomerApiCall(query),
        postProcess: (response) => {
          this.displaySpinner(false);
          this.getCustomerCallback(response);
        }
      } as GraphqlServiceApi
    }
  }
}
```
npm package: @slickgrid-universal/odata
Description: Grid OData Service to sync a grid with an OData backend server
Author: Ghislain B.
Latest version: 10.4.0

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)
[![lerna--lite](https://img.shields.io/badge/maintained%20with-lerna--lite-e137ff)](https://github.com/ghiscoding/lerna-lite)
[![npm](https://img.shields.io/npm/v/@slickgrid-universal/odata.svg)](https://www.npmjs.com/package/@slickgrid-universal/odata)
[![npm](https://img.shields.io/npm/dy/@slickgrid-universal/odata)](https://www.npmjs.com/package/@slickgrid-universal/odata)

## Grid OData Service
#### @slickgrid-universal/odata

OData Service to sync a grid with an OData backend server, the service will consider any Filter/Sort and automatically build the necessary OData query string that is sent to your OData backend server.

### External Dependencies
No external dependency

### Installation
Follow the instruction provided in the main [README](https://github.com/ghiscoding/slickgrid-universal#installation), you can see a demo by looking at the [GitHub Demo](https://ghiscoding.github.io/slickgrid-universal/#/example09) page.

### Usage
Simply use pass the Service into the `backendServiceApi` Grid Option.

##### ViewModel
```ts
import { GridOdataService, OdataServiceApi } from '@slickgrid-universal/odata';

export class MyExample {
  initializeGrid {
    this.gridOptions = {
      backendServiceApi: {
        service: new GridOdataService(),
        options: {
          version: 4 // OData v2 or v4
        },
        preProcess: () => this.displaySpinner(true),
        process: (query) => this.getCustomerApiCall(query),
        postProcess: (response) => {
          this.displaySpinner(false);
          this.getCustomerCallback(response);
        }
      } as OdataServiceApi
    }
  }
}
```
npm package: @slickgrid-universal/pagination-component
Description: Slick Pagination Component - Vanilla Implementation of a Pagination Component
Author: Ghislain B.
Latest version: 10.4.0

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)
[![lerna--lite](https://img.shields.io/badge/maintained%20with-lerna--lite-e137ff)](https://github.com/ghiscoding/lerna-lite)
[![npm](https://img.shields.io/npm/v/@slickgrid-universal/pagination-component.svg)](https://www.npmjs.com/package/@slickgrid-universal/pagination-component)
[![npm](https://img.shields.io/npm/dy/@slickgrid-universal/pagination-component)](https://www.npmjs.com/package/@slickgrid-universal/pagination-component)

## Pagination Component
#### @slickgrid-universal/pagination-component

Vanilla Implementation of a Pagination Component that can optionally be shown at the bottom of the grid. This Pagination will automatically be enabled when using a Backend Service (like OData/GraphQL) but can also optionally be used with a local (in-memory) dataset as well, the data will still remain in memory but it will be shown with pagination.

### Installation
Follow the instruction provided in the main [README](https://github.com/ghiscoding/slickgrid-universal#installation)
npm package: @slickgrid-universal/pdf-export
Description: PDF Export Service for SlickGrid Universal.
Author: Ghislain B.
Latest version: 10.4.0

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)
[![lerna--lite](https://img.shields.io/badge/maintained%20with-lerna--lite-e137ff)](https://github.com/ghiscoding/lerna-lite)
[![npm](https://img.shields.io/npm/v/@slickgrid-universal/pdf-export.svg)](https://www.npmjs.com/package/@slickgrid-universal/pdf-export)
[![npm](https://img.shields.io/npm/dy/@slickgrid-universal/pdf-export)](https://www.npmjs.com/package/@slickgrid-universal/pdf-export)

## PDF Export Service

#### `@slickgrid-universal/pdf-export`

Export your SlickGrid data to PDF format using [`jsPDF`](https://www.npmjs.com/package/jspdf) - a popular, well-supported PDF library for JavaScript.

### External Dependencies

- [`jsPDF`](https://www.npmjs.com/package/jspdf) to build and export to PDF.
- [`jspdf-autotable`](https://www.npmjs.com/package/jspdf-autotable) (optional) – renders a proper HTML-style table with borders, padding, and per-column styles. When detected at runtime the service automatically uses it; otherwise it falls back to a simple text-based layout.

## Installation

```bash
npm install @slickgrid-universal/pdf-export

# optional – for enhanced table rendering with borders, per-column styles and more
npm install jspdf-autotable
```

## Usage

```typescript
import { PdfExportService } from '@slickgrid-universal/pdf-export';
import { jsPDF } from 'jspdf';
import { applyPlugin } from 'jspdf-autotable';

applyPlugin(jsPDF); // register AutoTable once at startup (if installed)

// Register the service
const pdfExportService = new PdfExportService();

// Initialize in grid options
const gridOptions = {
  enablePdfExport: true,
  pdfExportOptions: {
    filename: 'my-grid-export',
    pageOrientation: 'landscape',
    pageSize: 'a4',
    documentTitle: 'My Grid Data'
  },
  externalResources: [pdfExportService]
};

// Export to PDF
await pdfExportService.exportToPdf({
  filename: 'custom-export',
  pageOrientation: 'portrait'
});
```

## Options

See [PdfExportOption](../common/src/interfaces/pdfExportOption.interface.ts) for all available options.

## Features

- Export grid data to PDF
- Support for grouped data
- Configurable page size and orientation (A4, Letter, Legal)
- Portrait and landscape orientations
- Custom font sizes
- Support for formatters
- HTML entity decoding
- Data sanitization
- Per-column text alignment
- Grouped column headers (pre-header row)
- Customizable header, pre-header, and alternate row colors
- PDF document properties (metadata)
- Powered by `jsPDF` (widely used, extensible, and feature-rich)
- Optional enhanced table rendering via `jspdf-autotable`

## License

MIT
npm package: @slickgrid-universal/react-row-detail-plugin
Description: React Row Detail Plugin for SlickGrid-React
Author: Ghislain B.
Latest version: 10.4.0

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)
[![NPM downloads](https://img.shields.io/npm/dy/@slickgrid-universal/react-row-detail-plugin)](https://npmjs.org/package/@slickgrid-universal/react-row-detail-plugin)
[![npm](https://img.shields.io/npm/v/@slickgrid-universal/react-row-detail-plugin.svg?logo=npm&logoColor=fff&label=npm)](https://www.npmjs.com/package/@slickgrid-universal/react-row-detail-plugin)

## Slickgrid-React Row Detail plugin
#### @slickgrid-universal/react-row-detail-plugin

Slickgrid-React Row Detail plugin

### Installation
Follow the instruction provided in the main [README](https://github.com/ghiscoding/slickgrid-universal#installation)
npm package: @slickgrid-universal/row-detail-view-plugin
Description: SlickRowDetail plugin - A plugin to add Row Detail Panel
Author: Ghislain B.
Latest version: 10.4.0

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)
[![lerna--lite](https://img.shields.io/badge/maintained%20with-lerna--lite-e137ff)](https://github.com/ghiscoding/lerna-lite)
[![npm](https://img.shields.io/npm/v/@slickgrid-universal/row-detail-view-plugin.svg)](https://www.npmjs.com/package/@slickgrid-universal/row-detail-view-plugin)
[![npm](https://img.shields.io/npm/dy/@slickgrid-universal/row-detail-view-plugin)](https://www.npmjs.com/package/@slickgrid-universal/row-detail-view-plugin)

## Slick Row Detail View (plugin)
#### @slickgrid-universal/row-detail-view-plugin

A plugin to add Row Detail View Panel that can be expanded/collapsed, the plugin was created from an idea that came out of this Original StackOverflow question & article making this possible (thanks to violet313).
 * [Can SlickGrid's row height be dynamically altered? - on Stack Overflow](https://stackoverflow.com/questions/10535164/can-slickgrids-row-height-be-dynamically-altered#29399927)
 * [a responsive slickgrid with dynamic row-heights by violet313](https://violet313.github.io)

### Installation
Follow the instruction provided in the main [README](https://github.com/ghiscoding/slickgrid-universal#installation)
npm package: @slickgrid-universal/rxjs-observable
Description: RxJS Observable Wrapper
Author: Ghislain B.
Latest version: 10.4.0

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)
[![lerna--lite](https://img.shields.io/badge/maintained%20with-lerna--lite-e137ff)](https://github.com/ghiscoding/lerna-lite)
[![npm](https://img.shields.io/npm/v/@slickgrid-universal/rxjs-observable.svg)](https://www.npmjs.com/package/@slickgrid-universal/rxjs-observable)
[![npm](https://img.shields.io/npm/dy/@slickgrid-universal/rxjs-observable)](https://www.npmjs.com/package/@slickgrid-universal/rxjs-observable)

## RxJS Observable Service Wrapper
#### @slickgrid-universal/rxjs-observable

An RxJS Observable Service Wrapper to make it possible to use RxJS with Slickgrid-Universal (with a Backend Service like OData/GraphQL). By default any Backend Service will be using Promises unless we use this RxJS Observable package.

This package is simply a bridge, a facade, to make it possible to use RxJS without adding RxJS to the `@slickgrid-universal/common` list of dependencies, so RxJS is a dependency of this package without being a dependency of the common (core) package, This will avoid adding dependencies not everyone need and won't clutter the common package (the common package will simply use an empty interface, which won't do anything, without requiring to install RxJS at all. We also have full unit tests coverage for all of that).

### External Dependencies
- [RxJS 7+](https://github.com/ReactiveX/RxJS)

### Installation
Follow the instruction provided in the main [README](https://github.com/ghiscoding/slickgrid-universal#installation), you can see a demo by looking at the [GitHub Demo](https://ghiscoding.github.io/slickgrid-universal) page.

### Usage
In order to use the Service, you will need to register it in your grid options via the `externalResources` as shown below and of course install RxJS itself (this package requires [RxJS 7](https://github.com/ReactiveX/RxJS)).

##### ViewModel
```ts
import { GridOdataService } from '@slickgrid-universal/odata';
import { RxJsResource } from '@slickgrid-universal/rxjs-observable';

export class MyExample {
  gridOptions: GridOption;

  initializeGrid {
    this.gridOptions = {
      // you will most probably use it with a Backend Service, for example with OData or GraphQL
      backendServiceApi: {
        service: new GridOdataService(),
        preProcess: () => this.displaySpinner(true),
        postProcess: () => this.displaySpinner(false),

        // assuming your Http call is with an RxJS Observable
        process: (query) => this.getAllCustomers$(query),
      } as OdataServiceApi,

      // ...
      externalResources: [new RxJsResource()],
    };
  }
}
```
npm package: @slickgrid-universal/sql
Description: SlickGrid Universal SQL Backend Service (implements BackendService for SQL)
Author: Ghislain B.
Latest version: 10.4.2

# @slickgrid-universal/sql

A SlickGrid Universal backend service for SQL databases. Implements the BackendService interface and generates SQL queries for filtering, sorting, and pagination.

## Usage

```ts
import { SqlService } from '@slickgrid-universal/sql';
```

## Features
- Implements BackendService for SQL
- Generates SQL queries for SlickGrid
- Supports filtering, sorting, and pagination

## Extending
You can extend SqlService to support your specific SQL dialect or advanced query features.
npm package: @slickgrid-universal/text-export
Description: Export to Text File (csv/txt) Service.
Author: Ghislain B.
Latest version: 10.4.0

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)
[![lerna--lite](https://img.shields.io/badge/maintained%20with-lerna--lite-e137ff)](https://github.com/ghiscoding/lerna-lite)
[![npm](https://img.shields.io/npm/v/@slickgrid-universal/text-export.svg)](https://www.npmjs.com/package/@slickgrid-universal/text-export)
[![npm](https://img.shields.io/npm/dy/@slickgrid-universal/text-export)](https://www.npmjs.com/package/@slickgrid-universal/text-export)

## Text Export Service (text file)
#### @slickgrid-universal/text-export

Simple Export to File Service that allows to export as CSV or Text (`.csv` or `.txt`), user can also choose which data separator to use for the export (comma, colon, semicolon, ...). This package requires [text-encoding-utf-8](https://www.npmjs.com/package/text-encoding-utf-8) which is use to ensure proper UTF-8 encoding, even emoji will be exported without issues.

There are a couple of reasons to use this package (it could be used instead of the `excel-export`)
- if you want to export to a text file with any type of separator (tab, colon, semicolon, comma)
- if you have a very large dataset, this export consumes a lot less memory in comparison to the `excel-export`

### External Dependencies
- [text-encoding-utf-8](https://www.npmjs.com/package/text-encoding-utf-8) to ensure proper UTF-8 encoding.

### Installation
Follow the instruction provided in the main [README](https://github.com/ghiscoding/slickgrid-universal#installation), you can see a demo by looking at the [GitHub Demo](https://ghiscoding.github.io/slickgrid-universal) page and click on "Export to CSV" from the Grid Menu (aka hamburger menu).

### Usage
In order to use the Service, you will need to register it in your grid options via the `externalResources` as shown below.

##### ViewModel
```ts
import { TextExportService } from '@slickgrid-universal/text-export';

export class MyExample {
  initializeGrid {
    this.gridOptions = {
      enableTextExport: true,
      textExportOptions: {
        sanitizeDataExport: true
      },
      externalResources: [new TextExportService()],
    }
  }
}
```

If you wish to reference the service to use it with external export button, then simply create a reference while instantiating it.
```ts
import { TextExportService } from '@slickgrid-universal/text-export';

export class MyExample {
  exportService: TextExportService;

  constructor() {
    this.exportService = new TextExportService();
  }

  initializeGrid {
    this.gridOptions = {
      enableTextExport: true,
      textExportOptions: {
        sanitizeDataExport: true
      },
      externalResources: [this.exportService],
    }
  }

  exportToFile() {
    this.exportService.exportToFile({ filename: 'export', format: 'csv' });
  }
}
```
npm package: @slickgrid-universal/utils
Description: Common set of small utilities
Author: Ghislain B.
Latest version: 10.3.0

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)
[![lerna--lite](https://img.shields.io/badge/maintained%20with-lerna--lite-e137ff)](https://github.com/ghiscoding/lerna-lite)
[![npm](https://img.shields.io/npm/v/@slickgrid-universal/utils.svg)](https://www.npmjs.com/package/@slickgrid-universal/utils)
[![npm](https://img.shields.io/npm/dy/@slickgrid-universal/utils)](https://www.npmjs.com/package/@slickgrid-universal/utils)

## Common Utils
#### @slickgrid-universal/utils

A set of small common utils that can be installed separately and that do not have any dependencies.

### Installation
Follow the instruction provided in the main [README](https://github.com/ghiscoding/slickgrid-universal#installation)
npm package: @slickgrid-universal/vanilla-bundle
Description: Vanilla Slick Grid Bundle - Framework agnostic the output is to be used in vanilla JS/TS - Written in TypeScript and we also use Vite to bundle everything into a single JS file.
Author: Ghislain B.
Latest version: 10.4.0

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)
[![lerna--lite](https://img.shields.io/badge/maintained%20with-lerna--lite-e137ff)](https://github.com/ghiscoding/lerna-lite)
[![npm](https://img.shields.io/npm/v/@slickgrid-universal/vanilla-bundle.svg)](https://www.npmjs.com/package/@slickgrid-universal/vanilla-bundle)
[![npm](https://img.shields.io/npm/dy/@slickgrid-universal/vanilla-bundle)](https://www.npmjs.com/package/@slickgrid-universal/vanilla-bundle)

## Vanilla Bundle
#### @slickgrid-universal/vanilla-bundle

Vanilla Bundle implementation (no framework, plain TypeSript implementation). This package does what other framework would do which is to make all these features usable into 1 bundle so that it could then be used by other Apps/Projects.

### Installation
This Vanilla Bundle is used used by the standalone [demos/vanilla](https://github.com/ghiscoding/slickgrid-universal/tree/master/demos/vanilla) which serves for demo purposes.

Go to the root of the repo and follow the instructions provided in the main [README](https://github.com/ghiscoding/slickgrid-universal#installation)
npm package: @slickgrid-universal/vanilla-force-bundle
Description: Vanilla Slick Grid Bundle (mostly exist for our Salesforce implementation) - Similar to Vanilla Bundle, the only difference is that it adds extra packages within its bundle (CustomTooltip, CompositeEditor & TextExport)
Author: Ghislain B.
Latest version: 10.4.0

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)
[![lerna--lite](https://img.shields.io/badge/maintained%20with-lerna--lite-e137ff)](https://github.com/ghiscoding/lerna-lite)
[![npm](https://img.shields.io/npm/v/@slickgrid-universal/vanilla-force-bundle.svg)](https://www.npmjs.com/package/@slickgrid-universal/vanilla-force-bundle)
[![npm](https://img.shields.io/npm/dy/@slickgrid-universal/vanilla-force-bundle)](https://www.npmjs.com/package/@slickgrid-universal/vanilla-force-bundle)

## <a href="https://lwc.dev/" rel="nofollow"><img alt="Salesforce (LWC)" src="https://login.salesforce.com/img/logo214.svg" width="65"></a> Vanilla Force Bundle
#### @slickgrid-universal/vanilla-force-bundle

Vanilla Force Bundle is similar to the Vanilla Bundle but oriented towards a Salesforce (LWC) implementation which requires an all-in-1 bundle (zip) with all necessary package loaded at once. So this package is very similar to the [@slickgrid-universal/vanilla-bundle](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/vanilla-bundle), it actually extends from it, with the only difference that it imports and includes 3 extra packages (which are optional in the `vanilla-bundle` but required for our Salesforce implementation) and those are:
- CompositeEditor
- CustomTooltip
- TextExport (CSV))

This package does what other framework would do, that is to make all the features usable into 1 bundle so that it could then be used by other Apps/Projects, for example we use this bundle in our SalesForce (with Lighning Web Component) App and it requires plain ES6 JavaScript which this bundle also produce (for that there's a [dist-grid-bundle-zip](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/vanilla-force-bundle/dist-grid-bundle-zip) folder which will zip the ES6 `dist` folder which we then import in our SalesForce implementation as a static resource).

### Installation
This Vanilla Bundle is used in our SalesForce implementation (since it requires plain ES6) and is also used by the standalone [demos/vanilla](https://github.com/ghiscoding/slickgrid-universal/tree/master/demos/vanilla) which serves for demo purposes.

Go to the root of the repo and follow the instructions provided in the main [README](https://github.com/ghiscoding/slickgrid-universal#installation)

### Salesforce Installation
Consult the [Installation, Salesforce - Wiki](https://ghiscoding.gitbook.io/slickgrid-universal/getting-started/installation-salesforce) for more info.
npm package: @slickgrid-universal/vue-row-detail-plugin
Description: Vue Row Detail Plugin for SlickGrid-Vue
Author: Ghislain B.
Latest version: 10.4.0

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)
[![NPM downloads](https://img.shields.io/npm/dy/@slickgrid-universal/vue-row-detail-plugin)](https://npmjs.org/package/@slickgrid-universal/vue-row-detail-plugin)
[![npm](https://img.shields.io/npm/v/@slickgrid-universal/vue-row-detail-plugin.svg?logo=npm&logoColor=fff&label=npm)](https://www.npmjs.com/package/@slickgrid-universal/vue-row-detail-plugin)

## Slickgrid-Vue Row Detail plugin
#### @slickgrid-universal/vue-row-detail-plugin

Slickgrid-Vue Row Detail plugin

### Installation
Follow the instruction provided in the main [README](https://github.com/ghiscoding/slickgrid-universal#installation)
npm package: @slickquant/slick-ladder
Description: Ultra-low latency price ladder component for web
Author: Slick Quant LLC.
Latest version: 0.2.0

# @slickquant/slick-ladder

Ultra-low latency price ladder component for web applications.

## Installation

```bash
npm install @slickquant/slick-ladder
```

## Quick Start

### HTML (UMD Bundle)

```html
<!DOCTYPE html>
<html>
<head>
  <title>Price Ladder Example</title>
</head>
<body>
  <div id="ladder-container" style="width: 400px; height: 600px;"></div>

  <!-- Load from CDN or local node_modules -->
  <script src="node_modules/@slickquant/slick-ladder/dist/slick-ladder.js"></script>

  <script>
    // Access via global SlickLadder namespace
    const container = document.getElementById('ladder-container');
    const ladder = new SlickLadder.PriceLadder({ container });

    // Update market data (Side.BID = 0, Side.ASK = 1)
    ladder.processUpdate({ price: 100.5, quantity: 1000, numOrders: 1, side: 0 });
    ladder.processUpdate({ price: 100.4, quantity: 2000, numOrders: 1, side: 0 });
    ladder.processUpdate({ price: 100.6, quantity: 1500, numOrders: 1, side: 1 });
    ladder.processUpdate({ price: 100.7, quantity: 1800, numOrders: 1, side: 1 });
  </script>
</body>
</html>
```

### TypeScript/ES Modules

```typescript
import { PriceLadder, Side } from '@slickquant/slick-ladder';

// Get container element
const container = document.getElementById('ladder-container') as HTMLElement;

// Initialize the ladder
const ladder = new PriceLadder({
  container,
  width: 400,
  height: 600
});

// Update market data using price level updates
ladder.processUpdate({ price: 100.5, quantity: 1000, numOrders: 1, side: Side.BID });
ladder.processUpdate({ price: 100.4, quantity: 2000, numOrders: 1, side: Side.BID });
ladder.processUpdate({ price: 100.6, quantity: 1500, numOrders: 1, side: Side.ASK });
ladder.processUpdate({ price: 100.7, quantity: 1800, numOrders: 1, side: Side.ASK });
```

## Features

- **Ultra-low latency** rendering using HTML Canvas
- **WebAssembly powered** order book processing (optional)
- **Real-time updates** with minimal CPU overhead
- **Customizable appearance** and behavior
- **Interactive** - click to trade

## WebAssembly Mode

The package includes pre-built WASM files for enhanced performance:

```typescript
import { initWasm } from '@slickquant/slick-ladder/wasm-adapter';

// Initialize WASM runtime
await initWasm('/path/to/wasm/files/');

// Now create ladder with WASM support
const ladder = new PriceLadder(canvas, {
  useWasm: true
});
```

## API Documentation

See the [main repository](https://github.com/SlickQuant/slick-ladder) for detailed documentation.

## License

MIT