Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -1,11 +1,15 @@
import { computed } from '@angular/core';

import type { AllPartial, NgxDatatableConfig } from '../ngx-datatable.config';
import type { NgxDatatableConfig } from '../ngx-datatable.config';
import type { DatatableComponent } from './datatable.component';

type AllRequired<T> = T extends (...args: any[]) => any
? T
: { [K in keyof T]-?: AllRequired<NonNullable<T[K]>> };

/** @internal */
export class DatatableConfiguration {
readonly configuration = computed(() => {
readonly configuration = computed<AllRequired<NgxDatatableConfig>>(() => {
const configuration = this.globalConfiguration;

return {
Expand Down Expand Up @@ -49,6 +53,6 @@ export class DatatableConfiguration {

constructor(
private readonly datatable: DatatableComponent,
private readonly globalConfiguration: AllPartial<NgxDatatableConfig>
private readonly globalConfiguration: NgxDatatableConfig
) {}
}
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@ import { Subscription } from 'rxjs';

import { ScrollContainerDirective } from '../directives/scroll-container.directive';
import {
AllPartial,
NGX_DATATABLE_CONFIG,
NgxDatatableConfig,
NgxDatatableCssClasses,
Expand Down Expand Up @@ -132,10 +131,10 @@ export class DatatableComponent<TRow extends Row = any>
private cd = inject(ChangeDetectorRef);
element = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;
rowDiffer: IterableDiffer<TRow | undefined> = inject(IterableDiffers).find([]).create();
private readonly globalConfiguration: AllPartial<NgxDatatableConfig> =
private readonly globalConfiguration: NgxDatatableConfig =
inject(NGX_DATATABLE_CONFIG, { optional: true }) ??
// This is the old injection token for backward compatibility.
inject<AllPartial<NgxDatatableConfig>>('configuration' as any, { optional: true }) ??
inject<NgxDatatableConfig>('configuration' as any, { optional: true }) ??
{};
readonly datatableConfiguration = new DatatableConfiguration(this, this.globalConfiguration);
protected readonly configuration = this.datatableConfiguration.configuration;
Expand Down
75 changes: 31 additions & 44 deletions projects/ngx-datatable/src/lib/ngx-datatable.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,72 +3,59 @@ import { InjectionToken, Provider } from '@angular/core';
/** Interface for messages to override default table texts. */
export interface NgxDatatableMessages {
/** Message to show when the array is present but empty */
emptyMessage: string;
emptyMessage?: string;
/** Footer total message */
totalMessage: string;
totalMessage?: string;
/** Footer selected message */
selectedMessage: string;
selectedMessage?: string;
/** Pager screen reader message for the first page button */
ariaFirstPageMessage: string;
ariaFirstPageMessage?: string;
/**
* Pager screen reader message for the n-th page button.
* It will be rendered as: `{{ariaPageNMessage}} {{n}}`.
*/
ariaPageNMessage: string;
ariaPageNMessage?: string;
/** Pager screen reader message for the previous page button */
ariaPreviousPageMessage: string;
ariaPreviousPageMessage?: string;
/** Pager screen reader message for the next page button */
ariaNextPageMessage: string;
ariaNextPageMessage?: string;
/** Pager screen reader message for the last page button */
ariaLastPageMessage: string;
ariaLastPageMessage?: string;
/** Row checkbox aria label */
ariaRowCheckboxMessage: string;
ariaRowCheckboxMessage?: string;
/** Header checkbox aria label */
ariaHeaderCheckboxMessage: string;
ariaHeaderCheckboxMessage?: string;
/** Group header checkbox aria label */
ariaGroupHeaderCheckboxMessage: string;
ariaGroupHeaderCheckboxMessage?: string;
/** Loading indicator aria label */
ariaLoadingMessage: string;
ariaLoadingMessage?: string;
}

/** CSS classes for icons that override the default table icons. */
export interface NgxDatatableCssClasses {
sortAscending: string;
sortDescending: string;
sortUnset: string;
pagerLeftArrow: string;
pagerRightArrow: string;
pagerPrevious: string;
pagerNext: string;
treeStatusLoading: string;
treeStatusExpanded: string;
treeStatusCollapsed: string;
sortAscending?: string;
sortDescending?: string;
sortUnset?: string;
pagerLeftArrow?: string;
pagerRightArrow?: string;
pagerPrevious?: string;
pagerNext?: string;
treeStatusLoading?: string;
treeStatusExpanded?: string;
treeStatusCollapsed?: string;
}

/**
* Interface definition for ngx-datatable global configuration
*/
/** Interface definition for ngx-datatable global configuration. */
export interface NgxDatatableConfig {
messages: NgxDatatableMessages;
cssClasses: NgxDatatableCssClasses;
headerHeight: number | 'auto';
footerHeight: number;
rowHeight: number | 'auto' | ((row: any) => number);
defaultColumnWidth: number;
messages?: NgxDatatableMessages;
cssClasses?: NgxDatatableCssClasses;
headerHeight?: number | 'auto';
footerHeight?: number;
rowHeight?: number | 'auto' | ((row: any) => number);
defaultColumnWidth?: number;
}

export const NGX_DATATABLE_CONFIG = new InjectionToken<AllPartial<NgxDatatableConfig>>(
'ngx-datatable.config'
);

/**
* This makes all properties recursively optional.
*
* @internal
*/
export type AllPartial<T> = T extends (...args: any[]) => any
? T
: { [K in keyof T]?: AllPartial<T[K]> };
export const NGX_DATATABLE_CONFIG = new InjectionToken<NgxDatatableConfig>('ngx-datatable.config');

/**
* Interface definition for INgxDatatableConfig global configuration.
Expand All @@ -82,7 +69,7 @@ export type INgxDatatableConfig = NgxDatatableConfig;
*
* @param overrides The overrides of the table configuration.
*/
export const providedNgxDatatableConfig = (overrides: AllPartial<NgxDatatableConfig>): Provider => {
export const providedNgxDatatableConfig = (overrides: NgxDatatableConfig): Provider => {
return {
provide: NGX_DATATABLE_CONFIG,
useValue: overrides
Expand Down
8 changes: 3 additions & 5 deletions projects/ngx-datatable/src/lib/ngx-datatable.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import { DatatablePagerComponent } from './components/footer/pager.component';
import { DatatableRowDetailTemplateDirective } from './components/row-detail/row-detail-template.directive';
import { DatatableRowDetailDirective } from './components/row-detail/row-detail.directive';
import { DisableRowDirective } from './directives/disable-row.directive';
import { AllPartial, NgxDatatableConfig, providedNgxDatatableConfig } from './ngx-datatable.config';
import { NgxDatatableConfig, providedNgxDatatableConfig } from './ngx-datatable.config';

@NgModule({
imports: [
Expand Down Expand Up @@ -63,12 +63,10 @@ import { AllPartial, NgxDatatableConfig, providedNgxDatatableConfig } from './ng
})
export class NgxDatatableModule {
/**
* Configure global configuration via INgxDatatableConfig
* Configure global configuration via NgxDatatableConfig
* @param configuration
*/
static forRoot(
configuration: AllPartial<NgxDatatableConfig>
): ModuleWithProviders<NgxDatatableModule> {
static forRoot(configuration: NgxDatatableConfig): ModuleWithProviders<NgxDatatableModule> {
return {
ngModule: NgxDatatableModule,
providers: [providedNgxDatatableConfig(configuration)]
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@ import { Provider, Signal, signal } from '@angular/core';

import { DatatableConfiguration } from '../lib/components/datatable-configuration';
import { DatatableComponent } from '../lib/components/datatable.component';
import { AllPartial, NgxDatatableConfig } from '../lib/ngx-datatable.config';
import { NgxDatatableConfig } from '../lib/ngx-datatable.config';

export interface DatatableConfigurationOverrides {
rowHeight?: Signal<NgxDatatableConfig['rowHeight']>;
headerHeight?: Signal<NgxDatatableConfig['headerHeight']>;
footerHeight?: Signal<NgxDatatableConfig['footerHeight']>;
cssClasses?: Signal<AllPartial<NgxDatatableConfig['cssClasses']>>;
messages?: Signal<AllPartial<NgxDatatableConfig['messages']>>;
cssClasses?: Signal<NgxDatatableConfig['cssClasses']>;
messages?: Signal<NgxDatatableConfig['messages']>;
}

export const provideDatatableConfigurationMock = (
Expand Down
Loading