Data Grid Refactor Roadmap

[nzbin]

• expandable row
• row selectable
• multiple row selectable
• cell selectable
• multiple cell selectable
• column hiding option
• column moving option
• column pinning option
• column filter option
• column resizable
• toolbar template
• header template
• header group
• footer template
• no result
• sidebar template
• tool panel
• sortable on frontend
• sort properties
• row selected items default
• row selection formatter(disabled & hideCheckbox)
• column type parameters
• i18n
• virtual scroll

[TejasCMehta]

@nzbin you can refer to this https://ag-grid.com/example.php for further enhancement ideas.

[TejasCMehta]

how to achieve this type of custom headertemplate with filter inputs like, dropdown, datepicker etc?

headerTemplate should be first priority in your feature list.

[panakour]

Also I think header and footer template are the most important in the list

[Laca81]

Also I think header and footer template are the most important in the list

Totally agree

[nzbin]

@TejasCMehta @panakour @Laca81
The header and footer template have been added. Please try the new version.

[YuriGrandinetti]

Hello, I downloaded the extensions and the ng-matero template, and I already upgraded to the new version of angular 10, still without any problems. I am wanting to use a datagrid project for my project, but I would like to know if you have a plan to implement this type of custom headertemplate with filter inputs like, dropdown, datepicker etc?

[nzbin]

@YuriGrandinetti I think you should customize the header template with your own logic.

[YuriGrandinetti]

ok, You are doing this implementation because I like its coding, simple to understand and easy to maintain, thank you Em qua., 1 de jul. de 2020 às 10:25, Zongbin <notifications@github.com> escreveu:

…

@YuriGrandinetti <https://github.com/YuriGrandinetti> I think you should customize the header template with your own logic. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#4 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AIXCMEMNNDZ3HEXCUURZQNTRZM2NVANCNFSM4MGL6XLQ> .

[nzbin]

@YuriGrandinetti Thanks for your advice，I will add this feature in future.

[mlribes]

[matSortActive], [matSortDirection] and matSortDisableClear support are also important in case of backend sort.

[nzbin]

[matSortActive], [matSortDirection] and matSortDisableClear support are also important in case of backend sort.

Many thanks for your PR, I have released a new version.

[TejasM9]

@nzbin can you add right sidebar on the data grid page ? What I need is I want to open a right side bar with search form on the data grid page. can you guide me any better way to do that. I also want to open add/edit form like that too.

[draylegend]

With virtual scroll the performance of grid will be even better.

Angular issue, stackblitz example

[ChrTall]

@nzbin I have a requirment for selecting different rows and columns in a datagrid. Will this be possible after the datagrid is refactored? Thank you for your work. Is the current state of the refactored Datagrid in the dev branch?

[nzbin]

@nzbin I have a requirment for selecting different rows and columns in a datagrid. Will this be possible after the datagrid is refactored? Thank you for your work. Is the current state of the refactored Datagrid in the dev branch?

Have you checked the examples?

[ChrTall]

@nzbin Yes I have read them. I think I can achieve my goal by using a Custom header template with a checkbox. I have problems to use fxLayout inside the ng-template for expandable rows. Is this not possible or are there any gotchas ?

[ismailix]

I am using the data-grid structure in one of my projects, but it seems a bit plain.
How can I export (pdf - excel) and filter and search within the table? thanks @nzbin

[ramax495]

When using material table we can init data with dataSource. And there is no dataSource in Mtx-grid. Is it possible or could be upgraded to have this feature ?

[nzbin]

When using material table we can init data with dataSource. And there is no dataSource in Mtx-grid. Is it possible or could be upgraded to have this feature ?

@ramax495 I'm sorry, I don't quite understand what you mean. You can use the dataSource with the grid instance.

extensions/projects/extensions/grid/grid.ts

Line 194 in 16d54b6

dataSource = new MatTableDataSource();

[ramax495]

@nzbin I mean Input property that mat-table has:
https://github.com/angular/components/blob/main/src/cdk/table/table.ts#L498

@Input() get dataSource(): CdkTableDataSourceInput<T>

where CdkTableDataSourceInput is:

/** Possible types that can be set as the data source for a `CdkTable`. */
export type CdkTableDataSourceInput<T> = readonly T[] | DataSource<T> | Observable<readonly T[]>;

In my case I have dataSource type that is derived from DataSource (from @angular/cdk/collections).
When I use mat-table I can pass to input parameters my dataSource like this: [dataSource]="dataSource".
In mtx-grig only array is allowed:
https://github.com/ng-matero/extensions/blob/main/projects/extensions/grid/grid.ts#L201

[nzbin]

@nzbin I mean Input property that mat-table has: https://github.com/angular/components/blob/main/src/cdk/table/table.ts#L498

@Input() get dataSource(): CdkTableDataSourceInput<T>

where CdkTableDataSourceInput is:

/** Possible types that can be set as the data source for a `CdkTable`. */
export type CdkTableDataSourceInput<T> = readonly T[] | DataSource<T> | Observable<readonly T[]>;

In my case I have dataSource type that is derived from DataSource (from @angular/cdk/collections). When I use mat-table I can pass to input parameters my dataSource like this: [dataSource]="dataSource". In mtx-grig only array is allowed: https://github.com/ng-matero/extensions/blob/main/projects/extensions/grid/grid.ts#L201

I'm sorry, mtx-grid is not exactly equal with mat-table. If you have any other ideas, please give me a PR.