Develop Reference

Vuetify datatable column filtering

Has anyone managed to implement individual column filtering into Vuetify datatable? e.g. a dynamic dropdown at the top of each column which is populated with the columns' unique values and filters the table on change.

Is the table data connected to a backend?
Yes? then just send the API call on submit
No?:
I assume that you use a similar setup as the documentation.
Then you might want to implement a v-dialog where you use v-text-field to be able to edit each field. for that you could simply create a second JSON, where the edited elements are stored in. On submit, could assign the edited data table to the new data table.
methods: { submit() { this.yourDataTableJSON = this.editedDataTableJSON }, }

Angular material table dynamic rows

I am creating a project using angular and material. In my project i want to add customised footer row in material table on click of button and delete that row on click of delete button.
Here is my code:
https://stackblitz.com/edit/angular-dshjiz-beqnrj?file=src/app/table-basic-example.html

You need to push data in datasource
this.dataSource.data.push({id: 1, name: 'test'})
There is stackblitz example

You need to push data as mentioned by Armen. You also need to call renderRows() method of the table as per suggestion https://material.angular.io/components/table/overview#1-write-your-mat-table-and-provide-data
Please check your updated stackblitz example
Same method can be implemented to delete the row. Just make sure the renderRows method calls everytime the table updates.

Angular 5 dynamically add & delete a component instance

I'm trying to create a table that looks like a spreadsheet with editable inputs inside each td. I'm using Angular's ComponentFactoryResolver as explained here, to add a row to the table when user clicks the add button.
Once the row is added, I use EventEmitter to emit all the data of that row as the last column value is changed.
I've tried to re implement the same functionality on this StackBlitz.
I'm having the following issues:
I'm unable to emit data from the newly added components. (Check Console)
Once I add a new row, the first row (not dynamic) also stops giving me the emitted data.
I'm not sure how to delete a row if user don't needs it as I don't have the reference to it.

This is what I am suggesting. You can create a list of row objects in the parent (table) component and use *ngFor to loop it over.
<app-row
*ngFor="let row of rowList"
[row]="row"
(entryUpdate)="onEntryUpdated($event)">
</app-row>
Please have a look at this

How to override submit button event in add/edit dialog in jqGrid

I am using jqGrid for a scheduling process. In the grid, I am displaying the working hours and other details of employees under a department. On clicking a row in the grid, another grid has to pop-up which gives details of the corresponding row in the master grid. For example you can refer to http://trirand.com/blog/jqgrid/jqgrid.html (adanced>masterdetails). This shows an example of two grids where on clicking a row in the master grid you get the invoice details in the below grid. I too need the same functionality and added to it, I have to add/edit the rows in the second grid. Both the grid datatype are local. On clicking submit button in the add/edit dialog I want to override the default action which submits the data to the server, and write my own function. The function is to store the added details/edited details into an object and bind it as a data block to a div.
I tried onclickSubmit, but it was still invoking the default method.
Added to this, i would like to reload the grid with the new row.

for your first problem, what you can do...onSelectRow property of jqgrid you can send the data of that row as local data and load a new grid just below to previous grid
for example, this you can write with first grid
onSelectRow: function(){
var sel_id = jQuery("#grid").jqGrid('getGridParam', 'selrow');
//this will give you id of the selected row
now to get values of the column for this row, there are several methods
i'll go with this one, lets say i have date as a column in this row
so,
var date=getCellValue(sel_id,'date');
and now you can load a new grid in this same function and send this data to that grid
and now your second problem, for the custom functionality of add/edit dialogue you can make use of this event and over ride it
beforeSubmit
check this
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing#editgridrow

jQGrid, how to add a new row inside the grid, not via a modal?

Some quick searching only turns up adding a new row to a jQGrid via a modal popup with the editable fields.
Can anyone point me to a sample or show me some code that allows you to add a new empty row into the grid itself, at the top?
I have an action column at the rightmost end of the grid in which onRowSelect() I have a save button appear and I can make that button do the save and refresh the grid I think..
I can't figure out how to click on a 'Add Row' button and add an empty row inside the grid at the top.
One option that I can see is to style the current add row modal to look like a horizontal row and place it to appear like its a row at the top of the grid.
jQGrid Documentation: http://www.trirand.com/jqgridwiki/

If you use datatype:'local' then you can use addRowData method to insert the row with position parameter set to 'first'. See some examples under http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#array_data.

This answer is courtesy of Oleg in my previous question here:
use $("#grid").addRowData(rowid,data, position, srcrowid);
Inserts a new row with id = rowid
containing the data in data (an
object) at the position specified
(first in the table, last in the table
or before or after the row specified
in srcrowid). The syntax of the data
object is: {name1:value1,name2:
value2…} where name is the name of the
column as described in the colModel
and the value is the value. This
method can insert multiple rows at
once. In this case the data parameter
should be array defined as
[{name1:value1,name2: value2…},
{name1:value1,name2: value2…} ] and
the first option rowid should contain
the name from data object which should
act as id of the row. It is not
necessary that the name of the rowid
in this case should be a part from
colModel.
P.S. Have a look at my profile for a number of jqgrid questions and answers.