ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-21 09:35:38 -05:00
Code Issues Packages Projects Releases Wiki Activity

Adding ability to expand and columns slickgrid table rows (#19168)

Browse Source 
* Adding ability to expand and columns tables

* Bolding icons
Fixing variable names

* Adding helper function
Making css more target

* Adding keyboard navigation and parsing treegrid data

* Adding attributes, data transformations and key events to the treegrid

* Expanded

* changing var name

* FIxing formatter name

* Adding back cell styling

* Removing comments

* Making a new TreeGrid component.
Separating treegrid logic from tableDataView

* Fixing comments

* changing method name

* Modifying only visible row dom attributes

* Removing white space, moving role attribute setter to constructor.

* Fixing some more PR comments

* Adding comments and renaming functions

* Fixing comments

* Fixing comments

* Fixing comments

* Fixing some logic and removing unused attributes from element

* Adding expandable formatter to the first column

* Making the formatter generic

* Reverting formatter code

* Adding doc comments

* Fixing comments

* Removing duplicated code

* Adding comments

* Setting columns only when the table is initialized

* Letting users set expanded state instead of forcing it to false
This commit is contained in:
Aasim Khan
2022-05-09 15:53:22 -07:00
committed by GitHub
parent adf6f253f0
commit 7e57503aa6
7 changed files with 233 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/sql/base/browser/ui/table/formatters.ts
View File

@@ -170,6 +170,27 @@ export function slickGridDataItemColumnValueWithNoData(value: any, columnDef: an
};
}
/**
* Creates a formatter for the first column of the treegrid. The created formatter will wrap the output of the provided formatter with a level based indentation and a chevron icon for tree grid parents that indicates their expand/collapse state.
*/
export function createTreeGridExpandableColumnFormatter<T>(formattingFunction: Slick.Formatter<T>): Slick.Formatter<T> {
return (row: number | undefined, cell: any | undefined, value: any, columnDef: any | undefined, dataContext: any | undefined): string => {
const spacer = `<span style='display:inline-block;height:1px;width:${(15 * (dataContext['level'] - 1))}px'></span>`;
const innerCellContent = formattingFunction(row, cell, value, columnDef, dataContext);
if (dataContext['isParent']) {
if (dataContext.expanded) {
return `<div>${spacer}<span class='codicon codicon-chevron-down toggle' style='font-weight:bold;'></span>&nbsp; ${innerCellContent}</div>`;
} else {
return `<div>${spacer}<span class='codicon codicon-chevron-right toggle' style='font-weight:bold;'></span>&nbsp; ${innerCellContent}</div>`;
}
} else {
return `${spacer}${innerCellContent}`;
}
};
}
/** The following code is a rewrite over the both formatter function using dom builder
* rather than string manipulation, which is a safer and easier method of achieving the same goal.
* However, when electron is in "Run as node" mode, dom creation acts differently than normal and therefore