Skip to content

Add export button and filename options to tree table component #428

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.

Sign up for GitHub

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 2 commits into from
Apr 22, 2025
Merged

Add export button and filename options to tree table component #428

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
dac1489
Add export button and filename options to tree table component
TerranceKhumalo-absa Apr 17, 2025
00bf0e3
Removed CpsTreeTAbleExportFormat. Regenerate docs
TerranceKhumalo-absa Apr 22, 2025
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
2 changes: 1 addition & 1 deletion projects/composition/src/app/api-data/cps-notification.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,7 @@
"optional": true,
"readonly": false,
"type": "number",
"description": "The duration (in milliseconds) that the notification will be displayed before automatically closing.\nValue 0 means that the notification is persistent and will not be automatically closed."
"description": "The duration (in milliseconds) that the notification will be displayed before automatically closing.\r\nValue 0 means that the notification is persistent and will not be automatically closed."
},
{
"name": "allowDuplicates",
Expand Down
12 changes: 6 additions & 6 deletions projects/composition/src/app/api-data/cps-table.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,22 +107,22 @@
"readonly": false,
"type": "boolean",
"default": "true",
"description": "Determines whether the 'Remove' button should be displayed in the row menu.\nNote: This setting only takes effect if 'showRowMenu' is true and 'rowMenuItems' is not set."
"description": "Determines whether the 'Remove' button should be displayed in the row menu.\r\nNote: This setting only takes effect if 'showRowMenu' is true and 'rowMenuItems' is not set."
},
{
"name": "showRowEditButton",
"optional": false,
"readonly": false,
"type": "boolean",
"default": "true",
"description": "Determines whether the 'Edit' button should be displayed in the row menu.\nNote: This setting only takes effect if 'showRowMenu' is true and 'rowMenuItems' is not set."
"description": "Determines whether the 'Edit' button should be displayed in the row menu.\r\nNote: This setting only takes effect if 'showRowMenu' is true and 'rowMenuItems' is not set."
},
{
"name": "rowMenuItems",
"optional": true,
"readonly": false,
"type": "CpsMenuItem[]",
"description": "Custom items to be displayed in the row menu.\nNote: This setting only takes effect if 'showRowMenu' is true."
"description": "Custom items to be displayed in the row menu.\r\nNote: This setting only takes effect if 'showRowMenu' is true."
},
{
"name": "reorderableRows",
Expand Down Expand Up @@ -178,7 +178,7 @@
"readonly": false,
"type": "boolean",
"default": "true",
"description": "If true, automatically detects filter type based on values, otherwise sets 'text' filter type for all columns.\nNote: This setting only takes effect if 'filterableByColumns' is true."
"description": "If true, automatically detects filter type based on values, otherwise sets 'text' filter type for all columns.\r\nNote: This setting only takes effect if 'filterableByColumns' is true."
},
{
"name": "sortMode",
Expand Down Expand Up @@ -570,15 +570,15 @@
"readonly": false,
"type": "boolean",
"default": "false",
"description": "Determines whether columns are resizable.\nIn case of using a custom template for columns, it is also needed to add cpsTColResizable directive to th elements."
"description": "Determines whether columns are resizable.\r\nIn case of using a custom template for columns, it is also needed to add cpsTColResizable directive to th elements."
},
{
"name": "columnResizeMode",
"optional": false,
"readonly": false,
"type": "\"expand\" | \"fit\"",
"default": "fit",
"description": "Determines how the columns are resized. It can be 'fit' (total width of the table stays the same) or 'expand' (total width of the table changes when resizing columns).\nNote: This setting only takes effect if 'resizableColumns' is true."
"description": "Determines how the columns are resized. It can be 'fit' (total width of the table stays the same) or 'expand' (total width of the table changes when resizing columns).\r\nNote: This setting only takes effect if 'resizableColumns' is true."
}
]
},
Expand Down
44 changes: 38 additions & 6 deletions projects/composition/src/app/api-data/cps-tree-table.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,22 +123,22 @@
"readonly": false,
"type": "boolean",
"default": "true",
"description": "Determines whether the 'Remove' button should be displayed in the row menu.\nNote: This setting only takes effect if 'showRowMenu' is true and 'rowMenuItems' is not set."
"description": "Determines whether the 'Remove' button should be displayed in the row menu.\r\nNote: This setting only takes effect if 'showRowMenu' is true and 'rowMenuItems' is not set."
},
{
"name": "showRowEditButton",
"optional": false,
"readonly": false,
"type": "boolean",
"default": "true",
"description": "Determines whether the 'Edit' button should be displayed in the row menu.\nNote: This setting only takes effect if 'showRowMenu' is true and 'rowMenuItems' is not set."
"description": "Determines whether the 'Edit' button should be displayed in the row menu.\r\nNote: This setting only takes effect if 'showRowMenu' is true and 'rowMenuItems' is not set."
},
{
"name": "rowMenuItems",
"optional": true,
"readonly": false,
"type": "CpsMenuItem[]",
"description": "Custom items to be displayed in the row menu.\nNote: This setting only takes effect if 'showRowMenu' is true."
"description": "Custom items to be displayed in the row menu.\r\nNote: This setting only takes effect if 'showRowMenu' is true."
},
{
"name": "loading",
Expand Down Expand Up @@ -530,7 +530,39 @@
"readonly": false,
"type": "boolean",
"default": "true",
"description": "If true, automatically detects filter type based on values, otherwise sets 'text' filter type for all columns.\nNote: This setting only takes effect if 'filterableByColumns' is true."
"description": "If true, automatically detects filter type based on values, otherwise sets 'text' filter type for all columns.\r\nNote: This setting only takes effect if 'filterableByColumns' is true."
},
{
"name": "showExportBtn",
"optional": false,
"readonly": false,
"type": "boolean",
"default": "false",
"description": "Determines whether to show export button in the toolbar."
},
{
"name": "exportBtnDisabled",
"optional": false,
"readonly": false,
"type": "boolean",
"default": "false",
"description": "Determines whether export button is disabled."
},
{
"name": "exportFilename",
"optional": false,
"readonly": false,
"type": "string",
"default": "export",
"description": "Filename to use when exporting data (without extension)."
},
{
"name": "exportOriginalData",
"optional": false,
"readonly": false,
"type": "any[]",
"default": "[]",
"description": "Original source data to use for export instead of processed tree table data."
},
{
"name": "renderDataAsHTML",
Expand All @@ -554,15 +586,15 @@
"readonly": false,
"type": "boolean",
"default": "false",
"description": "Determines whether columns are resizable.\nIn case of using a custom template for columns, it is also needed to add cpsTTColResizable directive to th elements."
"description": "Determines whether columns are resizable.\r\nIn case of using a custom template for columns, it is also needed to add cpsTTColResizable directive to th elements."
},
{
"name": "columnResizeMode",
"optional": false,
"readonly": false,
"type": "\"expand\" | \"fit\"",
"default": "fit",
"description": "Determines how the columns are resized. It can be 'fit' (total width of the table stays the same) or 'expand' (total width of the table changes when resizing columns).\nNote: This setting only takes effect if 'resizableColumns' is true."
"description": "Determines how the columns are resized. It can be 'fit' (total width of the table stays the same) or 'expand' (total width of the table changes when resizing columns).\r\nNote: This setting only takes effect if 'resizableColumns' is true."
}
]
},
Expand Down
2 changes: 2 additions & 0 deletions projects/composition/src/app/pages/tree-table-page/tree-table-page.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@
sortMode="multiple"
[resizableColumns]="true"
[columnResizeMode]="'expand'"
[showExportBtn]="true"
[exportFilename]="'virtual-tree-data'"
toolbarTitle="Tree table with a paginator, resizable columns, multiple sorting and individual filtering">
<ng-template #header>
<th
Expand Down
14 changes: 14 additions & 0 deletions projects/cps-ui-kit/src/lib/components/cps-tree-table/cps-tree-table.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,6 +117,20 @@
(clicked)="onClickActionBtn()">
</cps-button>
</div>
<div
*ngIf="showExportBtn"
class="cps-treetable-tbar-export-btn ml-2"
[ngClass]="{ 'btn-disabled': exportBtnDisabled }">
<cps-button
label="Export"
[disabled]="exportBtnDisabled"
color="prepared"
type="solid"
icon="export"
[size]="toolbarSize"
(clicked)="onExportData()">
</cps-button>
</div>
<div
*ngIf="showColumnsToggleBtn && columns.length > 0"
class="cps-treetable-tbar-coltoggle-btn"
Expand Down
81 changes: 81 additions & 0 deletions projects/cps-ui-kit/src/lib/components/cps-tree-table/cps-tree-table.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -519,6 +519,30 @@ export class CpsTreeTableComponent
*/
@Input() autoColumnFilterType = true;

/**
* Determines whether to show export button in the toolbar.
* @group Props
*/
@Input() showExportBtn = false;

/**
* Determines whether export button is disabled.
* @group Props
*/
@Input() exportBtnDisabled = false;

/**
* Filename to use when exporting data (without extension).
* @group Props
*/
@Input() exportFilename = 'export';

/**
* Original source data to use for export instead of processed tree table data.
* @group Props
*/
@Input() exportOriginalData: any[] = [];

/**
* If set to true, row data are rendered using innerHTML.
* @group Props
Expand Down Expand Up @@ -1377,4 +1401,61 @@ export class CpsTreeTableComponent
if (selection && !Array.isArray(selection)) selection = [selection];
this.rowsSelected.emit(selection);
}

onExportData() {
if (this.exportBtnDisabled) return;
this.exportJSON();
}

exportJSON() {
try {
const exportData = this.getExportData();
const jsonString = JSON.stringify(exportData, null, 2);
const blob = new Blob([jsonString], {
type: 'application/json;charset=utf-8'
});

const downloadLink = this.document.createElement('a');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = `${this.exportFilename}.json`;
downloadLink.click();
} catch (error) {
console.error('Error exporting JSON:', error);
}
}

getExportData(): any[] {
// If original data is provided, use it directly for export
if (this.exportOriginalData && this.exportOriginalData.length > 0) {
return this.exportOriginalData;
}

// Create a deep copy of the tree data without circular references
return this.removeCircularReferences(this.primengTreeTable?.value || []);
}

private removeCircularReferences(nodes: any[]): any[] {
return nodes.map((node) => {
const cleanNode: any = {};

// Copy all properties except 'parent' to avoid circular references
Object.keys(node).forEach((key) => {
if (key !== 'parent') {
if (
key === 'children' &&
Array.isArray(node.children) &&
node.children.length > 0
) {
// Recursively clean children
cleanNode.children = this.removeCircularReferences(node.children);
} else {
// Copy other properties as is
cleanNode[key] = node[key];
}
}
});

return cleanNode;
});
}
}
Loading