FullTable

This library let you use the component <lib-full-table> that provides you a sortable, pageable, filterable angular material table which generates automatic queries based on nestjs/crud.

Setup (until V5.*)

Add import {FullTableModule} from '@overflo-srl/full-table'; in your module. You also need to add your backend endpoint into FullTableModule.forRoot(*** BASE_URL ***).

Note: you can also add environment variable like FullTableModule.forRoot(enviroment.BASE_PATH)

Setup (V6 and above)

Add import {FullTableComponent} from '@overflo-srl/full-table'; in your module. You also need to inject the value of the BASE_PATH of the backend.

Here's an example:

@NgModule({
  declarations: [
   ...
  ],
  imports: [
    FullTableComponent,
    ...
  ],
  exports: [
    FullTableComponent,
    ...
  ],
  providers: [
    {provide: "BASE_PATH", useValue: 'https://backend.overflo.srl'}, // for full-table
  ]
})
export class ExampleModule { }

Styling

You can customize some properties of the table by overriding the following scss variables:

• fulltableHeaderBackgroundColor: background color of the table header
• fulltableHeaderTextColor: text color of the table header
• fulltableBorderColor: border color of the table

Example from styles.scss:

:root {
  --fulltableHeaderBackgroundColor: #282828;
  --fulltableHeaderTextColor: white;
  --fulltableBorderColor: #e3e3e3;
}

Parameters

To generate the table you need to enter basic information for your entity:

[PATH]: base path for your nestjs/crud entity ('/book)

[columnList]: description and settings for your columns (ColumnListModel[])

interface ColumnModel {
  def: string;
  name: string;
  value: {type: string, icon: string, filter: ((e: any) => boolean)}[] | ((e: any) => string);
  type?: string;
  /** Attempts to force cell type when exporting. If omitted, property 'type' is used. */
  exportedType?: string;
  filterDefault?: {title: string, value: string}[];
  sort?: boolean;
  hidden?: boolean
  /** Expects a callback function that will be executed when the cell is clicked. */
  click?: any;
  /** Displays a tooltip when the cell is hovered. */
  tooltip?: string;
  /** Accept an array of FilterOptions ({ displayedValue: string; realValue: string | boolean }) to display a select field 
  /** in the filter form for columns where this property is set. The select options will use 'displayedValue' 
  /** as labels and 'realValue' as values. In filter chip lists will be shown 'displayedValue'. 
  /** This feature currently supports only string, boolean or number type columns. 
  filterOptions?: FilterOption[];
}

OPTIONALS:

(data): an event emitter that emits the array of displayed entities every time there is an update in the table

(selectedChange): an event emitter that emits the array containing all the selected elements every time the array changes. If 'isOnlyOneSelectable' is set to true, it will return an array with only one element

[columnMobile]: description and settings for your column responsive mobile column (() => string)

[actions]: action event emitter that emits when there is an event on the table (refresh every time a value is emitted)

[search]: search query based on nestjs/crud

[join]: join query based on nestjs/crud

[defaultSort]: default sort column query based on nestjs/crud

[defaultFilter]: {name: string, operation?: string, value: string | number}[] default filter chip placed at table startup. (can be removed)

[pageSize]: page size number (default: 5)

[isSelectable]: a boolean value that implements elements selection column if set to true (default false)

[selectAllLimit]: a number that sets a limit on the quantity of items that can be selected simultaneously through the checkbox in the column header for selection, and thus disables it in case the total number of items in the table exceeds the set limit (default 1000)

[selectedElements]: an array of already selected elements

[isOnlyOneSelectable]: A boolean value that, when set to true, allows the selection of only one element in the table. If set, it will automatically set 'isSelectable' to true. (default: false)

[enableUrlQueryParams]: a boolean than enables the memorization of filters set on the full table via url params

[includeDeleted]: a boolean that includes soft deleted rows

FUNCTIONS:

export(exportOptions?: ExportOptions): a function that enables exporting the current table content to an Excel file. The optional parameter exportOptions is an object containing these three optional fields as well:

• fileName?: a string that allows modifying the name of the exported file, which would otherwise default to ' "export_" + new Date().getTime() '.

• additionalFilters?: an array of DefaultFilter that includes three fields: name (a string-type field containing the name of the field for filtering), operation? (an optional field of type OperatorsEnum), value (an any-type field allowing the insertion of the value on which the filter is to be applied). This list of filters will be added to the already present table filters. If not present, only the currently existing filters in the table will be applied.

• alternativeColumns?: an array of ColumnModel representing the column list to be displayed in the exported file. If not specified, the current list of columns in the table will be used. """`

Deploy

This project is for the NPM package https://www.npmjs.com/package/@overflo-srl/full-table.

To deploy a new version you have to:

• Build the full table "npm run build"
• Go on /dist/full-table
• "npm publish"

Finish.