generic-ui / generic-ui

Generic UI Grid

Generic UI Grid

Generic UI is a free lightweight data management tool that displays statistic figures in a tabular format. It was developed with ease of implementation and usage in mind. The data can be viewed in grid form. Using built-in functions, the data contained in the grid can easily be tracked and managed. Generic UI includes many user-friendly features like sorting, paging, data binding and theming. Additionally, the grid supports a variety of helpful elements such as buttons, check boxes, inputs, chips and dropdown menus.

Supported libraries and frameworks:

• jQuery - Grid for jQuery
• Angular - Grid for Angular,
• JavaScript - Grid for Vanilla JavaScript,
• React - soon,
• Vue.js - soon.

Grid is a rich library with many features like:

• Editing
• Virtual scroll, infinite scroll,
• Summaries,
• Sort, search, filter,
• Pagination,
• Column configuration,
• Themes,
• Templates.

To find more details about this Generic UI Grid library visit our website homepage. You will find there full documentation and easy to read guide on how to use Grid.

License:

Code released under the MIT license.

generic-ui's Issues

Errors After Upgrade to 0.14.2

After upgrade to 0.14.2 I got the following error:

Error: node_modules/@generic-ui/ngx-grid/structure/vertical-formation/core/domain/set-row-height/set-row-height.command-handler.d.ts:5:22 - error TS2420: Class 'SetRowHeightCommandHandler' incorrectly implements interface 'CommandHandler<StructureAggregate, SetRowHeightCommand>'.
Type 'SetRowHeightCommandHandler' is missing the following properties from type 'CommandHandler<StructureAggregate, SetRowHeightCommand>': publishDomainEvents, handleAggregate

Is there something missing?

headers styling

First of all thank you very much for providing such a usefull tool. It's a great project

Is your feature request related to a problem? Please describe.
I have data to show that need big size headers with long text (e.g: phosphorus concentration (µg/L)).
As I have a lot of column to display, even on big size screens, the column header text is often not displayed entirely.

Describe the solution you'd like
Is it possible to put column header text on 2 lines increasing the height of headers?

Again, thank you very much!

How to use sourceEdited output?

Suppose I had an angular service data for making API calls etc, would the following implementation achieve my goal of making an api call everytime the source is edited?

@Component({
  selector: 'app-spreadsheet',
  template: `
    <gui-grid #grid [columns]="columns" [source]="source" [loading]="loading" [cellEditing]="true" (sourceEdited)="updateData()"></gui-grid>`,
  encapsulation: ViewEncapsulation.None
})
export class SpreadsheetComponent implements AfterViewInit {

  @Output('sourceEdited')
  sourceEdited = new EventEmitter<void>();

  @ViewChild('grid', {static: true})
  gridComponent: GuiGridComponent;
  columns: Array<GuiColumn> = [
    {
      header: 'TSS. #',
      field: 'tss'
    },
  ];
  source: Array<any> = [
    {
      tss: '',
    }
  ];
  loading = false;

  constructor(private service: BruhMomentService) {
  }

  updateData(): any{
    this.sourceEdited.emit((value: any) => {
      return this.service.postData(value);
    });
  }

  ngAfterViewInit(): void {
    const api: GuiGridApi = this.gridComponent.api;
    api.selectAll();
  }
}

Filters

Hi, how to filter data from result

Thank you

Unhandled Promise rejection: Unexpected directive 'HermesModule' imported by the module 'StructureModule'. Please add an @NgModule annotation. ; Zone: <root> ; Task: Promise.then

I am using Angular 11 and I am getting 'Unhandled Promise rejection: Unexpected directive 'HermesModule' imported by the module 'StructureModule'. Please add an @NgModule annotation. ; Zone: ; Task: Promise.then ' in console.

My app.module.ts code:

import { GuiGridModule } from '@generic-ui/ngx-grid';

@NgModule({
imports: [
GuiGridModule
],

Question

I am submitting a

• Question
  I have a requirement where user can select and highlight column by clicking on the header of the grid. Is this possible in ngx-grid? if yes how can i select column. Any code examples would be appreciated.

Additional Filtering Components

Is your feature request related to a problem? Please describe.
Per your documentation and per a discussion with generic-ui, you will be implementing filtering components. It was suggested that I add a feature request for this so I am doing so.

Describe the solution you'd like
I would like to see filtering options such as text inputs to filter on specific columns, date range filters, boolean yes/no filters and dropdown filters. We are upgrading our applications from AngularJS/angular-ui-grid to Angular12/generic-ui and would love to see these filtering components added.

Describe alternatives you've considered
Alternatively to this feature, we'll probably have to develop our own filtering components and try to make them work with generic-ui grid.

Additional context

Discussed in #41

^{Originally posted by mattseaboard November 2, 2021}
Hi there. I read on this page that you are working on adding a filtering feature. Do you have any sort of roadmap on when this feature will be implemented?

I looked for a roadmap for generic-ui grid but couldn't find one. We're evaluating which grid we're going to go with and am just curious if there is an expected timeline for this feature, thanks!

remote data

when i use remote data use as observable datatable didnt reload till i click any location on the data table

Header Class

Is there a way to apply a stylesheet for the header without using the themes? Thanks!

Scroll to the row

It would be nice to be able to skip to the row using its id or index in virtual scroll and pagination mode.

Formating Summaries

To allow formatting both labels and output for the summary cells.

Buttons and Dropdowns in Cells

I was able to add buttons using custom HTML to the cell but then I had to use special technique to call class method. I used this one:

https://www.c-sharpcorner.com/blogs/call-angular-2-function-from-javascript

Native support angular style (click)="onClick($event)" would be much easier.

Also I am not sure that it will be possible using custom HTML populate dropdown items dynamically.

Alight Does Not Work for Custom View

Here is the code which does not have effect right aligning the value:

` {
field: 'amount',
type: GuiDataType.STRING,
view: (value: number) => {
const parts = value.toString().split('.');
parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
const result = parts.join('.') + (parts.length === 1 ? '.00' : parts[1].length === 1 ? '0' : '');

    return `${result}`;
  },
  header: 'Amount',
  width: 95,
  align: GuiColumnAlign.RIGHT
},

`

JQuery - Error prompt when removing the target node html

Describe the bug
Error keep appearing in console when I remove the table node.

To Reproduce
Steps to reproduce the behavior:

1. Initialize the guigrid to the target div -> $(".target").guiGrid({any config})
2. Remove the html of the target div -> $(".target").html("")

Expected behavior
Expected to clear the div but with no error prompt, Tried handling with try and catch . The error is still prompting in console.

Screenshots

Desktop (please complete the following information):

• OS: WIndows
• Browser : Chrome
• Version 91.0.4472.124 (Official Build) (64-bit)

Tooltip - how to display it.

Tooltip - how to display it.

Support for horizontal scrolling

As far as I see the grid only supports vertical scrolling, could it be possible to support horizontal scrolling for high number of columns?

Server Side pagination with UI

Hello thanks for grid and I'm using but I have some huge data so i wan to load when UI page is change i tried to find in your documents but not find the way and event. can you guide or if this feature is no there plz add this also.

Unable to Add grid in Angular 12

Angular CLI: 12.2.8
Node: 14.18.0
Package Manager: npm 6.14.15
OS: win32 x64

Angular:
...

Package Version

@angular-devkit/architect 0.1202.8 (cli-only)
@angular-devkit/core 12.2.8 (cli-only)
@angular-devkit/schematics 12.2.8 (cli-only)
@schematics/angular 12.2.8 (cli-only)

After Install package we got some warning for old version related

_npm i @generic-ui/ngx-list @generic-ui/fabric @generic-ui/hermes [email protected]
npm WARN @generic-ui/[email protected] requires a peer of @angular/common@^8.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @generic-ui/[email protected] requires a peer of @angular/core@^8.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @generic-ui/[email protected] requires a peer of @angular/forms@^8.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @generic-ui/[email protected] requires a peer of @angular/platform-browser@^8.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of bootstrap@^3.1.1 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @generic-ui/[email protected] requires a peer of @angular/common@^8.2.0 but none is installed. You must install peer dependencies yourself.
npm WARN @generic-ui/[email protected] requires a peer of @angular/core@^8.2.0 but none is installed. You must install peer dependencies yourself.
npm WARN @generic-ui/[email protected] requires a peer of @angular/common@^8.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @generic-ui/[email protected] requires a peer of @angular/core@^8.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @generic-ui/[email protected] requires a peer of @angular/forms@^8.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @generic-ui/[email protected] requires a peer of @angular/platform-browser@^8.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @generic-ui/[email protected] requires a peer of @angular/common@^8.2.0 but none is installed. You must install peer dependencies yourself.
npm WARN @generic-ui/[email protected] requires a peer of @angular/core@^8.2.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\nice-napi):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"!win32","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\webpack-dev-server\node_modules\fsevents):

• [email protected]
• @generic-ui/[email protected]
• @generic-ui/[email protected]
• @generic-ui/[email protected]
  added 6 packages from 1 contributor, removed 1 package, updated 1 package and audited 1487 packages in 21.759s

91 packages are looking for funding
run npm fund for details

found 1 moderate severity vulnerability
run npm audit fix to fix them, or npm audit for details_

And when we add compoment in html getting this error.

'gui-grid' is not a known element:

1. If 'gui-grid' is an Angular component, then verify that it is part of this module.
2. If 'gui-grid' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.ngtsc(-998001)

@NgModule({
declarations: [
AppComponent,
LoginComponent,
MainComponent,
HeaderComponent,
FooterComponent,
MenuSidebarComponent,
ButtonComponent,
DashboardComponent,
InventoryComponent,
AgentManagementComponent

],
imports: [
BrowserModule,
AppRoutingModule,
ReactiveFormsModule,
HttpClientModule,
GuiGridModule
],
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: BasicAuthInterceptor, multi: true },
{ provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true }
],
bootstrap: [AppComponent]
})
export class AppModule { }

GuiGridApi value is undefined

Thanks for the wonderful library!!

I am trying to access the grid api to delete a particular row. As of now, i couldnt find any way to delete a row from the grid.
So, i thought of finding the selected index from the selectedRow event and using that index to delete a row.

I have followed documentation specified @ https://generic-ui.com/guide/api. But still this.gridComponent.api is returned as undefined in ngOnInit method. Please let me know how to access the api and let me know if i am doing something wrong below.

`
@ViewChild(GuiGridComponent, {static: true})
gridComponent!: GuiGridComponent;
api!: GuiGridApi;

constructor(private http: HttpClient,
    private formBuilder: FormBuilder,
    private changeDetectionRef: ChangeDetectorRef ) {}

ngOnInit() {      
    this.api = this.gridComponent.api;
 }

`

Is there any example/ documentation that explains how to delete a row in the grid? If yes, please point me to the documentation.

Thanks for the help!!

in angular 13 error

./node_modules/@generic-ui/fabric/ivy_ngcc/fesm2015/generic-ui-fabric.js:6:0-49 - Error: Module not found: Error: Resolving to directories is not possible with the exports field (request was ./)

how to selectedItem(Event listener) not triggered in all the tables?

First, thank a lot for this helpful tool 🙏, second please forgive my english

Is your feature request related to a problem? Please describe.
So in my case, I have more than one table on a page
Is there a way to trigger selectedItem(Event listener) for only the table that is being clicked,
without triggering other tables selectedItem(Event listener)

Describe the solution you'd like
features to set the selectedItem(Event listener) not global scope, maybe bind with the element id/name

Describe alternatives you've considered
I've tried to use onclick event instead, but it still triggers the other tables

Additional context
I've recreated the problem code here: https://angular-ivy-fcmh6e.stackblitz.io

Thanks in advance

Horizontal scrolling is not working <gui-grid>. Is there a way to enable it ?

I have 20 + columns.

HTML file -
<gui-grid
[source]="characters"
[infoPanel]="infoPanel"
[sorting]="sorting"
[columns]="columns1"
[theme]="'material'"
[rowHeight]="60"
[searching]="true"
[maxHeight]="400"
[summaries]="summaries"
[cellEditing]="true"
[horizontalGrid]="true"
[editMode]="true"
[maxWidth]="500"
[infoPanel]="true"
[enableHorizontalScrollbar]= "1"
[enableVerticalScrollbar]= "1"

Sub Grid not Available

in generic Ui sub grid is not available

Summary Columns are Misaligned

When I added summary row cells of it are misaligned:

Is that normal or I do something wrong?

Here is my cell definition:

{
  field: 'amount',
  type: GuiDataType.NUMBER,
  formatter: (value: number) => {
    const parts = value.toString().split('.');
    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    const result =
      parts.join('.') +
      (parts.length === 1 ? '.00' : parts[1].length === 1 ? '0' : '');

    return `${result}`;
  },
  view: GuiCellView.TEXT,
  header: 'Amount',
  summaries: {
    enabled: true,
    summariesTypes: [
      'sum'
    ]
  },
  width: 125,
  align: GuiColumnAlign.RIGHT,
},

Virtual Scroll Events

I was trying to implement virtual scrolling but so far I had to load whole set of data. Do you have a sample code or point me in the direction where that technique is described beyond you code snippet at https://generic-ui.com/guide/virtual-scroll?
Are there any call back which can be defined to catch event when new portion of data is requested?

I want to select the information and delete it.

-> I want to select the information and delete it.
-> I want add checkbox multi to select data and delete it.
No samples to study

Event for external sorting

Hi,

First of all, thanks for your great work!

I am currently trying to implement your grid as our major datatable-solution (as a replacement for angular material datatables).

So far everything is working fine, but I encountered a problem with the sorting implementation of the columnheaders. We are using OData to filter / sort the data provided to the table.
Would it be possible to add an event to the component API if the sorting of the table has changed, emitting the currently applied sorting directions and their respective columns to which they apply?

This would make it possible to sort the data externally (via OData).

As a "very unattractive workaround", I currently access the sorting of the grid as follows:

`

@ViewChild(GuiGridComponent, {static: false}) grid: GuiGridComponent;

[...]

const grid = this.grid as any;
grid.sortingCommandInvoker.sortingDispatcher.commandDispatcher.commandStream
    .subscribe((response) => {
      if (response.messageType === 'CompositionChangeSortStatusCommand') {
        const gridCompo = grid.compositionWarehouse.compositionRepository.find(response.compositionId).value;

        const resolvedSortConfig = response.sortParams.map((sort) => {
          const repoColumn = gridCompo.allColumns.find((x) => {
            return x.field?.fieldId.getId() === sort?.fieldId.getId();
          });

          const configColumn = grid.columnsConfig.find((x) => x.name === repoColumn.name);

          return { column: configColumn, sort };
        });

        // doSomethingWithConfig.
        // grid.sortingChanged.emit(resolvedSortConfig);
        // grid.api.onSortingChanged.next(resolvedSortConfig);
      }
});

`

If an external sorting were possible as an option, however, the frontend sorting would also have to be deactivatable, so that the column headers would trigger this event, but no sorting would be actively applied.

Kind regards

~ TriangularPineapple

How to disable row selection (rowSelecting = false)

Please tell me about row selection how to disable , because i am using "rowSelecting = false" but it's not working because when i am going to check at dev tools it's working. So please give me a solution.

I have attached a screenshot , so please look at give me a solution.

FEAT: Tab to next editable cell

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Accessibility

Describe the solution you'd like
A clear and concise description of what you want to happen.

basic accessibility features, in particular Tab between the next editable cell.

Describe alternatives you've considered
Using a different chart.

Additional context
This is a pretty light table which is great, but if i want to use it for data entry it gets very taxing if my users cannot tab.
(it would be great if they could use the arrow keys but a tab order is EASY to implement and i am in need of the feature rather soon otherwise i will have to switch libs)

Unable to set relevant access for a particular cell of a particular row.

My grid contains multiple rows of data. I need to give read-only access for particular cells and rows based on a cell value and give write access for other cells as well as rows. But I am just able to set either read-only or write access for the entire grid. Is there a feature that I can use to implement the above case?

Compatibility for latest versions of Angular

I am starting a project for my company and now in the process of choosing a third party data table tool.
I found out that generic-ui suites our needs but our project is running on Angular 13.
It seems that generic-ui doesn't support Angular 13 yet and throws the error below when installing it:

npm ERR! While resolving: [email protected]
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR! @angular/common@"~13.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"12.2.11" from @generic-ui/[email protected]
npm ERR! node_modules/@generic-ui/ngx-grid
npm ERR! @generic-ui/ngx-grid@"*" from the root project

I tried installing it by using --force and it pushed through.

After that I added GuiGridModule in my module and tried putting the <gui-grid> in my component but now causing this error

./node_modules/@generic-ui/fabric/ivy_ngcc/fesm2015/generic-ui-fabric.js:6:0-49 - Error: Module not found: Error: Resolving to directories is not possible with the exports field (request was ./)

• When can you support Angular versions >12?
• Do you have remedy for the Module not found error?

Template columns are not updating

I have a problem, that columns defined by template are not updating.

<gui-grid [source]="source">
  <ng-container *ngFor="let column of columns">
    <gui-grid-column [header]="column.header" [field]="column.field">
      <ng-template let-value="value">
        {{value}}
      </ng-template>
    </gui-grid-column>
  </ng-container>
</gui-grid>

On first start, its working. But if i change the variable columns, the grid don't update the internal config.

I've created a sample to reproduce the issue. To change the columns, you can click on the toggle button.
https://stackblitz.com/edit/angular-grid-quick-start-ue5cft?file=src/app/app.component.ts

Language localization

Hi, is there a way to enable label translation?

Expose Data Object For Each cell

While it is possible to access one data field in each cell:

field: 'amount', type: GuiDataType.NUMBER, view: (value: number) => { ...
It is impossible to have access to the whole object.

Potencial solution could be this notation:

field: 'amount', type: GuiDataType.NUMBER, view: (value: number, data: any) => { ...

Use with IE11

Hi,
Could you explain how to use the grid with IE11 (or older browsers like Firefox 38) ?
I added polyfills.js but nothing changed, the console "insufficient stack space"....Is there an option to activate ?

Thanks,

Guillaume

How to display drop-down in generic ui-grid.

I was working on angular and am having a grid to display but am not able to display a drop-down in the grid. Please help me in displaying a drop-downs in generic ui-grid.

Full Row Styling

While it is possible to use custom HTML/styling for each cell independently, it would be nice to be able to apply style to the whole row depending on its content. For example I need to make all cells show text in bold based on one of the cell values, but since that value is not available I cannot do it that way.

Dependency Issue installing hermes 0.19.0

When trying to install the hermes component the peerDependency the dependency is setup looking for 6.6.7 specifically instead of ~6.6.7

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @generic-ui/[email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/rxjs
npm ERR! rxjs@"~7.8.0" from the root project
npm ERR! peer rxjs@"^6.5.3 || ^7.4.0" from @angular/[email protected]
npm ERR! node_modules/@angular/cdk
npm ERR! @angular/cdk@"^15.0.4" from the root project
npm ERR! peer @angular/cdk@"15.0.4" from @angular/[email protected]
npm ERR! node_modules/@angular/material
npm ERR! @angular/material@"^15.0.4" from the root project
npm ERR! 7 more (@angular/common, @angular/core, @angular/forms, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer rxjs@"6.6.7" from @generic-ui/[email protected]
npm ERR! node_modules/@generic-ui/hermes
npm ERR! @generic-ui/hermes@"^0.19.0" from the root project
npm ERR! peer @generic-ui/hermes@"0.19.0" from @generic-ui/[email protected]
npm ERR! node_modules/@generic-ui/ngx-grid
npm ERR! @generic-ui/ngx-grid@"^0.19.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/rxjs
npm ERR! peer rxjs@"6.6.7" from @generic-ui/[email protected]
npm ERR! node_modules/@generic-ui/hermes
npm ERR! @generic-ui/hermes@"^0.19.0" from the root project
npm ERR! peer @generic-ui/hermes@"0.19.0" from @generic-ui/[email protected]
npm ERR! node_modules/@generic-ui/ngx-grid
npm ERR! @generic-ui/ngx-grid@"^0.19.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!

How can I get the column config change event, I want to save the setting which column is enabled or not.

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Unable to set relevant access for a particular cell of a particular row.

My grid contains multiple rows of data and I need to give read only access for particular cell and as well as row based on cell value and give write access for other cells as well as rows. But I am just able to set either read only or write access for entire grid. Is there a feature that I can use to implement the above case.

How to insert dynamic data into <gui-grid> without specifying columns.

Problem -
I need to insert 1000+ data into this grid and all the columns are dynamic.
How can I use this plugin to achieve this?

Tree View

Having a tree view as an option would be fantastic, particularly if it worked like this: https://devexpress.github.io/devextreme-reactive/react/grid/docs/guides/tree-data/

Observable

Hello,
does the generic UI supports Observable?
What if I want to make my source to look this way :
<gui-grid [columns]="columns" [source]="source | async" > ?
I appreciate any help or advise.

GuiSelectedRow New Structure

Before 0.14.2 (and maybe 0.14.1) GuiSelectedRow had property data for row object storage. Now property source is populated with the row object instead. However GuiSelectedRow definition still have data which prevents code compilation.

Can you fix that please?

Ability to set focus to a row

When opening a modal box that contains a generic-ui grid in Angular, the focus of the page remains behind the modal by default.

So when using the keyboard arrow up or arrow down keys, the page behind the modal will respond, unless you click on a row in the grid on the modal

It would be helpful if we were able to set focus on a specific row in the modal, such as when row selection is enabled, and set to use a radio button. That way the user could select a specific row with the keyboard arrow keys, possibly in conjunction with "selectedRowIndexes".

Editable field is smaller than original text cell

When in editable mode area dedicated for the editor seems of the fixed size and can be much smaller than the cell itself, which hides original or new text to be edited.

Steps to reproduce the behavior:

1. Just have a long enough cell in the edit mode with long text to be edited
2. Click on in that cell
3. See that the text and the area is taken just a fraction of the cell

Editable area should take the whole cell minus what is defined with padding style

Contribute to the Grid

Hi folks, I noticed that the Grid for Angular is published under MIT, however the source code is not fully available. Wondering if are you looking fro contributors or if you plan to open source the code.

Thank you!

In Angular 13 getting below issue

./node_modules/@generic-ui/fabric/ivy_ngcc/fesm2015/generic-ui-fabric.js:6:0-49 - Error: Module not found: Error: Resolving to directories is not possible with the exports field (request was ./)

Does the grid support dynamic Add and Delete operations using buttons?

Is your feature request related to a problem? Please describe.
It is nice that the grid is inline-editable, but I am not sure if there is a way to add/remove rows using buttons.

Describe the solution you'd like
Provide Add/Remove buttons in the toolbar to add and remove rows.

Deselect Row

Hello,
May I ask you please to provide an example with how can we use custom row deselection.
Thank you