Grid Configurations
Example
export interface IDBMasterConfig {
theme?: EDBMasterTheme;
/**
* Used in many places. Use in add form will look like ex: Add ${screenName}.<br/>
* You can provide value like 'Person' | 'Contact Details'. <br/>
* It gives more personalized success/error messages for that particular screen.
*/
screenName?: string;
/** Default : false */
showThemeSelector?: boolean;
/**
* Default : browser timezone.
* Dates will be converted into this timezone before display in grid and sending to database query.
* Timezone List : https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
*/
dateTimeZone?: string;
/**
* Default : 'dd-MM-yyyy hh:mm:ss a'
* System is using date-fns formats to format date object in grid cells.
* This format will be converted automatically for primeNG calendar control.
* It will not work when unsupported format options of primeNg calendar control are used.
*
* PrimeNG calendar does not support time format but it will be automatically appended.
* This format will be default for all Calendar control in UI.
*/
dateTimeFormat?: string;
operations?: {
add?: IDBMasterConfigOperation;
hideAddConfirmation?: boolean;
/** Default : false. If true, it will not show delete all button. */
hideDeleteAllButton?: boolean;
hideDeleteAllConfirmation?: boolean;
showRefreshButton?: boolean;
/**
* Default : T.EDBMasterOperationsOrder.theme_selector,
* T.EDBMasterOperationsOrder.column_selector,
* T.EDBMasterOperationsOrder.global_search,
* T.EDBMasterOperationsOrder.import,
* T.EDBMasterOperationsOrder.export,
* T.EDBMasterOperationsOrder.refresh,
* T.EDBMasterOperationsOrder.add,
* T.EDBMasterOperationsOrder.custom_actions,
* T.EDBMasterOperationsOrder.delete_all,
* */
operationsOrder?: (
EDBMasterOperationsOrder.custom_actions
| EDBMasterOperationsOrder.delete_all
| EDBMasterOperationsOrder.add
| EDBMasterOperationsOrder.refresh
| EDBMasterOperationsOrder.export
| EDBMasterOperationsOrder.import
| EDBMasterOperationsOrder.global_search
| EDBMasterOperationsOrder.column_selector
| EDBMasterOperationsOrder.theme_selector)[];
customActionButtons?: IDBMasterTopLevelCustomActionButton[];
importData?: IDBMasterImportData;
exportData?: {
showExportButton?: boolean;
/** Default : pi pi-download */
icon?: string;
csv?: {
enable: boolean;
/** Default : CSV */
labelCSV: string;
/** Default : CSV Selected */
labelCSVSelected: string;
}
// pdf?: boolean;
}
};
externalLibs?: {
css?: string[],
js?: string[],
},
cssCode?: {
runOn: 'header',
code: string,
}[],
jsCode?: {
/**
* oncePageLoad = Code will be run only once on page load. config and global data are not available. It will append script to page script tag. <br/>
* oncePageLoadWithContext = Code will be run only once on page load with context of data. (config, globalData: any, utils: any, queryParams: any) <br/>
* gridRender = Gets executed everytime grid gets data. (gridEvent, gridData, globalData: any, utils: any, queryParams: any) <br/>
* modifyGridRequest = You can modify api call request. (gridEvent, reqBody: IQueryFormat, globalData: any, utils: any, queryParams: any) <br/>
* preSaveAndEdit = Change data before saving/update/import. (reqBody: any | any[], globalData: any, utils: any, queryParams: any, mode: 'save' | 'edit' | 'import') <br/>
* beforeSaveModalOpen = Change data before save modal open. (formData: any , globalData: any, utils: any, queryParams: any) <br/>
* beforeEditModalOpen = Change data before edit modal open. (formData: any , globalData: any, utils: any, queryParams: any) <br/>
*
*/
appendTo: EDBMasterConfigAppendTo,
/**
* // gridEvent, gridData are available to use.
*
* // Return promise for long awaiting tasks.
* new Promise(async (resolve, reject) => {
* await new Promise(r => setTimeout(r, 3000));
* gridData[0].name = 'Sample data';
* resolve();
* });
*
* // Directly modify data of grid
* gridData[0].name = 'Sample data';
*
* // Return function
* (function setData() { gridData[0].name = 'Sample data'; } );
*
*/
code: string,
}[],
grid: {
header: 'Students',
minWidth: '80rem',
showColumnSelector: true,
selection: {
mode: 'multiple',
checkboxSelection: true,
},
fields: [{
header: 'Name',
path: 'name',
enableSorting: true,
}, {
header: 'APL Contact',
path: 'apl_contact',
dbData: {
collection: 'apl_contacts',
pkField: '_id',
displayField: 'contact_name',
}
}, {
header: 'Address',
path: 'preferred_address',
enableSorting: true,
visibilityStatus: T.EDBMasterConfigGridColumnVisibilityStatus.INVISIBLE,
}, {
header: 'Mobile No',
path: 'mobile',
}, {
header: 'Created At',
path: 'createdAt',
autoFormatDate: true,
dateTimeFormat: 'dd-MM-yyyy hh:mm:ss a',
}, {
header: 'Boolean',
path: 'boolField',
}]
// apiCallOverrides: {
// url: `http://:beHostPort/api/custom-api/:userPath/custom-get-grid-data`,
// },
operations: {
delete: {
enable: true,
cssClass: 'text-danger',
// apiCallOverrides: {
// url: `http://:beHostPort/api/custom-api/:userPath/custom-delete-by-id`,
// pkField: '_id', // 👈 Primary key of current table
// },
//
// apiCallOverridesDeleteMany: {
// url: `http://:beHostPort/api/custom-api/:userPath/custom-delete-many`,
// pkField: '_id', // 👈 Primary key of current table
// }
},
edit: {
enable: true,
cssClass: 'text-info',
// apiCallOverrides: {
// url: `http://:beHostPort/api/custom-api/:userPath/custom-edit-by-id`,
// },
//
// apiCallOverridesGetById: {
// url: `http://:beHostPort/api/custom-api/:userPath/custom-get-by-id`,
// pkField: '_id', // 👈 Primary key of current table
// }
},
hideDeleteConfirmation: true,
hideEditConfirmation: true,
gridOperationsOrder: [
T.EDBMasterGridOperationsOrder.delete,
T.EDBMasterGridOperationsOrder.edit,
T.EDBMasterGridOperationsOrder.custom,
],
gridColumnsOrder: [
T.EDBMasterGridColumnsOrder.checkbox,
T.EDBMasterGridColumnsOrder.dbFields,
T.EDBMasterGridColumnsOrder.actions,
],
actionColumnWidth: '120px',
customActionButtons: [{
actionName: 'approve',
cssClass: 'pi pi-check',
style: {
color: 'yellow',
},
confirmationMessageScript: "`Do you want to approve ${selectedGridItems.name}?`",
}],
},
selectFieldsForQuery: {
// 'current_ctc': -1,
// 'name': 1,
// 'preferred_address': 1,
// 'mobile': 1,
// 'createdAt': 1,
},
filter: {
showGlobalSearch: true,
globalSearchFields: ['name', 'preferred_address', 'mobile', 'createdAt'],
rowFilter: true,
},
pagination: {
showPagination: true,
rowsPerPage: 10,
serverSidePagination: true,
},
grouping: {
groupRowsBy: 'name',
headerStyle: {
fontWeight: 'bold',
},
headerCssClass: 'text-primary',
footerStyle: {
fontWeight: 'bold',
},
footerCssClass: 'text-danger text-right',
footerColumnPath: 'name'
},
sortMode: 'multiple',
multiSortMeta: [{
field: 'name',
order: 1,
}],
},
}
Interface Documentation
👉 This interface documentation contains only grid configuration just to focus on context of grid. It has many other things also.
export interface IDBMasterConfig {
grid?: {
header?: string;
/** ex: Showing {first} to {last} of {totalRecords} entries */
currentPageReportTemplate?: string;
/** Default : false */
showColumnSelector?: boolean;
/** Default : 50rem */
minWidth?: string;
/** Default : 40rem */
breakpoint?: string;
/** Used for nested grid only. From this field it will pickup data array and show grid based on that */
dataFieldPath?: string;
operations?: {
delete?: Omit<IDBMasterConfigOperation, 'label'> & { apiCallOverridesDeleteMany?: IDBMasterAPICallOverrides; };
edit?: Omit<IDBMasterConfigOperation, 'label'> & { apiCallOverridesGetById?: IDBMasterAPICallOverrides; };
hideDeleteConfirmation?: boolean;
hideEditConfirmation?: boolean;
/** Default : false, if true, it will not show success message when delete multiple is used. You need to provide that message manually. */
hideDeleteManySuccessMessage?: boolean;
disableDoubleClickForEdit?: boolean;
disableDeleteButtonClickForDelete?: boolean;
/** Only 3 */
gridOperationsOrder?: (EDBMasterGridOperationsOrder.delete | EDBMasterGridOperationsOrder.edit | EDBMasterGridOperationsOrder.custom)[];
/** Only 3 */
gridColumnsOrder?: (EDBMasterGridColumnsOrder.checkbox | EDBMasterGridColumnsOrder.actions | EDBMasterGridColumnsOrder.dbFields)[];
actionColumnWidth?: string;
customActionButtons?: IDBMasterCustomActionButton[];
};
/**
* If empty, it will generate grid for all fields of schema in schema order.
* It will not generate _id for Mongo DB.
*/
fields?: IDBMasterConfigGridField[],
/**
* Ex1 : { name: 1 }
* Ex2 : { password : -1 }
* It supports syntax of select object in API Maker's query API.
* By default, all fields of database table will be selected.
* Not applicable for nested grids.
*/
selectFieldsForQuery?: {
[field: string]: 1 | -1
};
/**
* Default : 'single'. Default sorting is executed on a single column, in order to enable multiple field sorting,
* set sortMode property to "multiple" and use metakey(ctrl | cmd) when clicking on another column.
*/
sortMode?: 'single' | 'multiple';
/**
* Ex : [{ field: 'name', order: 1 }]
* Useful to have columns sorted by default.
* To make it work, field should have enableSorting true.
*/
multiSortMeta?: { field: string; order: -1 | 1 }[];
pagination?: {
/** Default : false */
showPagination?: boolean;
/** Default : false, this will not work for nested grid. */
serverSidePagination?: boolean;
/** Default : 10 */
rowsPerPage?: number;
/** Default : [10, 20, 50, 100, 500, 1000] */
rowsPerPageOptions?: number[];
}
grouping?: {
// rowGroupMode: 'subheader'; // default : subheader. rowspan = is not supported.
/** group by column name */
groupRowsBy: string;
/** Give style object in angular style. */
headerStyle?: any;
/** You can provide single or multiple classes. */
headerCssClass?: string,
/** Give style object in angular style. */
footerStyle?: any;
/** You can provide single or multiple classes. */
footerCssClass?: string,
/** Group footer will be generated from this property of object. */
footerColumnPath?: string,
}
selection?: {
/** Default grid selection mode is multiple */
mode: 'single' | 'multiple';
/** name of primary key field. Default : it will be automatically pickup from schema. */
dataKey?: string;
/** Default : true, If true we need Ctrl | Cmd to select row. */
metaKeySelection?: boolean;
/** Default : false, Works only with mode=multiple. If true it will show checkbox column for selection. */
checkboxSelection?: boolean;
}
filter?: {
/** Default : false, if true you can filter in all fields */
showGlobalSearch?: boolean;
// country.name is supported by primeNG table.
/**
* Ex: ['name', 'first_name', 'country.name']
* It will work only for string & number fields.
* For string, it will check for contains and for number type, will be exact match query.
*/
globalSearchFields?: string[];
/** Default : false, if true it will show filter for each column */
rowFilter?: boolean;
}
apiCallOverrides?: IDBMasterAPICallOverrides;
};
}