@koobiq/ag-grid-angular-theme

The package provides a theme for the ag-grid-angular@^34 (see overview).

Navigation:

• Installation
• Usage
• Custom Keyboard Shortcuts
• Development

Installation

npm install @koobiq/ag-grid-angular-theme@^34 ag-grid-community@^34 ag-grid-angular@^34

Usage

Setup your main styles.scss file:

// Import theme
@use '@koobiq/ag-grid-angular-theme';

// Import @koobiq/icons
// https://github.com/koobiq/icons
@use '@koobiq/icons/fonts/kbq-icons';

// Import @koobiq/design-tokens
// https://github.com/koobiq/design-tokens
@use '@koobiq/design-tokens/web/css-tokens';
@use '@koobiq/design-tokens/web/css-tokens-light';
@use '@koobiq/design-tokens/web/css-tokens-dark';

// Import Inter font
// https://koobiq.io/en/main/typography/overview#installing-fonts
@import '@fontsource/inter/400.css';
@import '@fontsource/inter/500.css';
@import '@fontsource/inter/600.css';
@import '@fontsource/inter/700.css';
@import '@fontsource/inter/400-italic.css';
@import '@fontsource/inter/500-italic.css';

Apply the theme for <ag-grid-angular> in your template:

import { KbqAgGridTheme } from '@koobiq/ag-grid-angular-theme';
import { AgGridModule } from 'ag-grid-angular';

@Component({
    imports: [AgGridModule, KbqAgGridTheme],
    template: `<ag-grid-angular kbqAgGridTheme />`
})

Custom keyboard shortcuts

You can apply custom keyboard shortcuts by adding the corresponding directives to your <ag-grid-angular> component.

| Key | Action | Directive | | -------------- | -------------------------- | --------------------------------- | | Tab | Move focus to the next row | kbqAgGridToNextRowByTab | | Shift + ↓↑ | Select multiple rows | kbqAgGridSelectRowsByShiftArrow | | Ctrl + A | Select all rows | kbqAgGridSelectAllRowsByCtrlA | | Ctrl + Click | Select row | kbqAgGridSelectRowsByCtrlClick | | Ctrl + C | Copy selected rows | kbqAgGridCopyByCtrlC |

Development

Setup Node.js

Make sure you have the correct version of Node.js installed (we recommend use nvm):

nvm use

Install dependencies

yarn install

Run dev application

yarn run dev:theme

Then open http://localhost:4200/

Build package

yarn run build:theme

Create GitHub release and publish

yarn run release:theme

Once the GitHub release is created, the package is automatically published to NPM using GitHub Publish Action.

To preview the release process without actually publishing the package, run:

yarn run release:theme:preview X.X.X