https://github.com/sayan751/au2-data-grid

Aurelia2 data-grid implementation based on CSS grid
https://github.com/sayan751/au2-data-grid

aurelia2 data-grid

Last synced: 2 months ago
JSON representation

Aurelia2 data-grid implementation based on CSS grid

• Host: GitHub
• URL: https://github.com/sayan751/au2-data-grid
• Owner: Sayan751
• License: mit
• Created: 2021-11-01T08:50:43.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2024-10-21T19:40:01.000Z (3 months ago)
• Last Synced: 2024-10-22T12:48:38.747Z (3 months ago)
• Topics: aurelia2, data-grid
• Language: TypeScript
• Homepage:
• Size: 1.82 MB
• Stars: 2
• Watchers: 4
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# @sparser/au2-data-grid

[![npm version](https://img.shields.io/npm/v/@sparser/au2-data-grid)](https://www.npmjs.com/package/@sparser/au2-data-grid)

[![npm download](https://img.shields.io/npm/dt/@sparser/au2-data-grid?label=npm%20download)](https://www.npmjs.com/package/@sparser/au2-data-grid)

![build status](https://github.com/Sayan751/au2-data-grid/workflows/build/badge.svg)

[Documentation](./package/README.md)

This repository contains a data-grid implementation based on Aurelia2 and CSS grid. The highlight of this implementation is that the grid can be defined completely in markup which gives you the freedom of using your own awesome Aurelia2 custom elements. An example usage looks something like below.

```html

  

  

    

              

    

       

  

  

  

    

      

    

    

  

  

  

    

      

    

    

  

```

In the example above a custom element named `value-text` is used for the header and for the content another custom element named `normal-text` is used.

Moreover, the following features are also supported:

- Configurable item selection: single as well as multiple or none.

- Static content or content backed with backend services (does not provide any HTTP pipeline; thus, giving freedom of reusing your own HTTP pipeline).

- Page-able content/data.

- Data can be sorted via callback.

- Columns can be reordered, without essentially rerendering the grid completely.

- Columns can be resized (also without rerendering the grid).

## Examples

Examples can be found in the `./examples/webpack-apps` directory.

| Name           | Description                                                                                                                                                        |

| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |

| non-customized | This is a non-customized example of the data-grid. The app contains two examples: one static list, and another one is with backed with a backend resource service (located at `./examples/fake-service`). |

| customized-header | This example shows how to customized the header template. |

| customized-grid | This example shows how to customized the header as well as the grid template. |

## Development

This is a npm7 workspace.

Thus, after cloning the repo you just need to do a `npm ci` at the root to download all the dependencies.

The core package is located at the `./package` directory.

You can start a watch with `npm run watch`. This is useful when you want to test you changes quickly in one of the example webpack-apps.

The webpack-apps as well as the fake-service can be started with `npm start`.