-
Notifications
You must be signed in to change notification settings - Fork 2
Update README.md with comprehensive documentation #10
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from 5 commits
Commits
Show all changes
8 commits
Select commit
Hold shift + click to select a range
6191bdf
Initial plan
Copilot aef1ae3
Update README.md with comprehensive documentation
Copilot 04be416
Update README.md
radomirchev 3829909
Address review feedback: Update documentation links and feature descr…
Copilot e0b0e7d
Fix typo and update remaining Angular links to Web Components
Copilot 4745c33
Apply suggestion from @radomirchev
radomirchev 31aec10
Apply suggestion from @radomirchev
radomirchev dae8527
Update README.md
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,17 +1,243 @@ | ||
| # Ignite UI Grid Lite | ||
| [](https://github.com/IgniteUI/igniteui-grid-lite/actions/workflows/node.js.yml) | ||
| [](https://coveralls.io/github/IgniteUI/igniteui-grid-lite?branch=master) | ||
| [](https://badge.fury.io/js/igniteui-grid-lite) | ||
|
|
||
| Ignite UI Grid Lite is a high-performance, lightweight data grid built as a web component using [Lit](https://lit.dev/). It provides essential grid functionality with a small footprint, making it perfect for applications that need fast, efficient data visualization without the overhead of a full-featured grid. | ||
|
|
||
| This is still a **very** early proof of concept for a web component based data grid. | ||
| ## Table of Contents | ||
| - [Features](#features) | ||
| - [Browser Support](#browser-support) | ||
| - [Getting Started](#getting-started) | ||
| - [Usage](#usage) | ||
| - [Building the Library](#building-the-library) | ||
| - [Running Tests](#running-tests) | ||
| - [Documentation](#documentation) | ||
| - [Ignite UI Grid Lite vs. Ignite UI for Angular](#ignite-ui-grid-lite-vs-ignite-ui-for-angular) | ||
| - [Contributing](#contributing) | ||
| - [Support](#support) | ||
| - [License](#license) | ||
|
|
||
| ## Local Development | ||
| ## Features | ||
|
|
||
| 1. Clone the repository. | ||
| 2. Run `npm install` | ||
| 3. Run `npm run build` | ||
| 3. Play and explore the codebase. | ||
| Ignite UI Grid Lite provides core data grid capabilities with an emphasis on performance and simplicity: | ||
|
|
||
| ## Local demo with Vite | ||
| - **High Performance Row Virtualization** - Handles large datasets efficiently with built-in virtual scrolling | ||
| - **Column Filtering** - Built-in column filtering capabilities | ||
| - **Sorting** - Column sorting support for better data organization | ||
| - **Lightweight** - Minimal bundle size for fast load times | ||
| - **Web Standards** - Built with web components for framework-agnostic usage | ||
| - **Modern Architecture** - Built with Lit and TypeScript for maintainability | ||
| - **Customizable** - Flexible theming and styling options | ||
| - **Cell Templating** - Custom cell rendering for flexible data display | ||
| - **Header Templating** - Custom header rendering for enhanced grid headers | ||
| - **Accessible** - Designed with accessibility in mind | ||
radomirchev marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| Run `npm start` to open the demo page in `demo/index.html` | ||
| ## Browser Support | ||
|
|
||
| Ignite UI Grid Lite supports all modern browsers: | ||
|
|
||
| | ![chrome] | ![firefox] | ![edge] | ![safari] | ![opera] | | ||
| |:---:|:---:|:---:|:---:|:---:| | ||
| | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | | ||
|
|
||
| ## Getting Started | ||
|
|
||
| ### Installation | ||
|
|
||
| Install via npm: | ||
|
|
||
| ```bash | ||
| npm install igniteui-grid-lite | ||
| ``` | ||
|
|
||
| ### Quick Start | ||
|
|
||
| 1. Import the grid component in your JavaScript/TypeScript file: | ||
|
|
||
| ```typescript | ||
| import 'igniteui-grid-lite'; | ||
| ``` | ||
|
|
||
| 2. Use the grid in your HTML: | ||
|
|
||
| ```html | ||
| <igc-grid-lite> | ||
| <!-- Grid configuration here --> | ||
| </igc-grid-lite> | ||
| ``` | ||
|
|
||
| 3. For a complete example, check out the [demo application](./demo). | ||
|
|
||
| ## Usage | ||
|
|
||
| For detailed usage instructions and API documentation, visit: | ||
| - <a href="https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grid-lite/overview">Grid Lite Overview</a> | ||
| - [API Documentation](https://igniteui.github.io/igniteui-grid-lite/) | ||
|
|
||
| ## Building the Library | ||
|
|
||
| ### Setup | ||
|
|
||
| Clone the repository and install dependencies: | ||
|
|
||
| ```bash | ||
| git clone https://github.com/IgniteUI/igniteui-grid-lite.git | ||
| cd igniteui-grid-lite | ||
| npm install | ||
| ``` | ||
|
|
||
| ### Build | ||
|
|
||
| To build the library: | ||
|
|
||
| ```bash | ||
| npm run build | ||
| ``` | ||
|
|
||
| This will: | ||
| - Analyze custom elements | ||
| - Build the TypeScript source | ||
| - Generate API documentation | ||
|
|
||
| ### Development | ||
|
|
||
| Start the development server with live reload: | ||
|
|
||
| ```bash | ||
| npm start | ||
| ``` | ||
|
|
||
| This will open the demo page at `demo/index.html` with automatic rebuilding on file changes. | ||
|
|
||
| ## Running Tests | ||
|
|
||
| Run tests once: | ||
|
|
||
| ```bash | ||
| npm test | ||
| ``` | ||
|
|
||
| Run tests in watch mode: | ||
|
|
||
| ```bash | ||
| npm run test:watch | ||
| ``` | ||
|
|
||
| Tests are written using [@web/test-runner](https://modern-web.dev/docs/test-runner/overview/) and [@open-wc/testing](https://open-wc.org/docs/testing/helpers/). | ||
|
|
||
| ## Documentation | ||
|
|
||
| ### API Documentation | ||
|
|
||
| The API documentation is generated using [TypeDoc](https://typedoc.org/). To build the docs: | ||
|
|
||
| ```bash | ||
| npm run build | ||
| ``` | ||
|
|
||
| Documentation will be available in the build output. | ||
|
|
||
| ### Additional Resources | ||
|
|
||
| - <a href="https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/general-getting-started">Ignite UI Web Components Product Documentation</a> | ||
| - <a href="https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grid-lite/overview">Grid Lite Documentation</a> | ||
| - [Web Components Guide](https://lit.dev/) | ||
|
|
||
| ## Ignite UI Grid Lite vs. Ignite UI for Angular | ||
|
|
||
| Ignite UI Grid Lite is designed as a lightweight, open-source alternative to the full-featured <a href="https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/data-grid">Ignite UI for Web Components Data Grid</a>, while allowing for an easy swap with the full-featured grid, if application needs require it. | ||
|
|
||
| ### Ignite UI Grid Lite (Open Source - MIT) | ||
|
|
||
| **Best for:** | ||
| - Applications requiring basic grid functionality | ||
| - Projects where bundle size is critical | ||
| - Framework-agnostic web applications | ||
| - Community-driven development | ||
|
|
||
| **Includes:** | ||
| - Core data virtualization | ||
| - Basic filtering and sorting | ||
| - Lightweight and fast | ||
| - MIT licensed and free for all use | ||
|
|
||
| **Best for:** | ||
| - Enterprise applications requiring advanced features | ||
| - Complex data scenarios with editing, grouping, and aggregation | ||
| - Applications needing professional support and SLA | ||
| - Angular-specific optimizations | ||
radomirchev marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
|
|
||
| **Includes:** | ||
| - All Grid Lite features plus: | ||
| - Advanced filtering with query builder | ||
| - Excel-style column filtering | ||
| - Grouping | ||
| - Cell editing, row editing, batch editing | ||
| - Summaries and aggregations | ||
| - Excel, PDF, and CSV export | ||
| - Column pinning, hiding, and resizing | ||
| - Row selection | ||
| - Paging | ||
| - Multi-column headers and collapsible column groups | ||
| - Cell merging | ||
| - Custom row layouts | ||
| - Master-detail views | ||
| - Hierarchical grid | ||
| - Tree grid | ||
| - Pivot grid | ||
| - 24/5 developer support | ||
|
|
||
| <a href="https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/general-open-source-vs-premium">Learn more about Open-Source vs Premium Ignite UI options</a> | ||
|
|
||
| ## Contributing | ||
|
|
||
| We welcome contributions! Please see our [contributing guidelines](CONTRIBUTING.md) for details on: | ||
| - Code of conduct | ||
| - Development workflow | ||
| - Submitting pull requests | ||
| - Coding standards | ||
|
|
||
| To contribute: | ||
|
|
||
| 1. Fork the repository | ||
| 2. Create a feature branch (`git checkout -b feature/amazing-feature`) | ||
| 3. Commit your changes (`git commit -m 'Add amazing feature'`) | ||
| 4. Push to the branch (`git push origin feature/amazing-feature`) | ||
| 5. Open a Pull Request | ||
|
|
||
| ## Support | ||
|
|
||
| ### Community Support | ||
|
|
||
| Community support for open source usage of this product is available at: | ||
| - [GitHub Issues](https://github.com/IgniteUI/igniteui-grid-lite/issues) - Report bugs or request features | ||
| - [Stack Overflow](https://stackoverflow.com/questions/tagged/igniteui) - Ask questions using the `igniteui` tag | ||
|
|
||
| ### Commercial Support | ||
|
|
||
| For professional support and access to the full Ignite UI for Web Components suite with advanced grid features: | ||
| - Visit [Infragistics Support](https://www.infragistics.com/support) | ||
| - Explore [Ignite UI for Web Components](https://www.infragistics.com/products/ignite-ui-web-components) | ||
| - [Register for a trial](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/general-getting-started) | ||
|
|
||
| ## License | ||
|
|
||
| This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details. | ||
|
|
||
| **MIT License** - Free for commercial and non-commercial use. | ||
|
|
||
| © Copyright 2025 INFRAGISTICS. All Rights Reserved. | ||
|
|
||
| For the commercial Ignite UI for Angular product, please visit [Infragistics Licensing](https://www.infragistics.com/legal/license). | ||
|
|
||
| --- | ||
|
|
||
| **Built with ❤️ by [Infragistics](https://www.infragistics.com/)** | ||
|
|
||
| <!-- Browser Logos --> | ||
| [chrome]: https://user-images.githubusercontent.com/2188411/168109445-fbd7b217-35f9-44d1-8002-1eb97e39cdc6.png "Google Chrome" | ||
| [firefox]: https://user-images.githubusercontent.com/2188411/168109465-e46305ee-f69f-4fa5-8f4a-14876f7fd3ca.png "Mozilla Firefox" | ||
| [edge]: https://user-images.githubusercontent.com/2188411/168109472-a730f8c0-3822-4ae6-9f54-785a66695245.png "Microsoft Edge" | ||
| [opera]: https://user-images.githubusercontent.com/2188411/168109520-b6865a6c-b69f-44a4-9948-748d8afd687c.png "Opera" | ||
| [safari]: https://user-images.githubusercontent.com/2188411/168109527-6c58f2cf-7386-4b97-98b1-cfe0ab4e8626.png "Safari" | ||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.