ReactDataGrid - Make column re-orderable - react-data-grid

I am using ReactDataGrid in my application.
Now I have a requirement that user should re-order columns as per his choice.
How can we achieve this ?

Related

MUI DataGrid ColumnDef: the row is not available on the valueOptions prop of the column definition

I am using a DataGridPro component with different columns.
One one the columns is defined like this:
This issue is that I am trying to understand why the row is not available in the valueOptions prop of the column definition.
I would like to be able to populate the choices based on a list that is available on the row in another field.
But I get this error when I try to read the row:
Can you please help? The grid is populated with lots of rows coming from an api fetch.
Every other column is working fine accept this one.
Thank you.
I discovered that it was my bad. My column object was used twice with different parameters and so, yes, the row was not available for the second case.

Highlight a row in list view depending on column value

Using Backpack for Laravel version 4, is there a way to set a css class on a row in list view if a field on the model contains a particular value? I know the ability exists in the DataTables api, but can't think of a way to make it happen in BP4L. Thanks.

Syncfusion mvc grid control filtering on hyperlink column

I have just been trying out syncfusion controls for mvc and have come across bit of a hurdle. My problem is that when i use a hyperlink in ej grid column using column template feature the filters just don't work for that column. My current UI is designed that way that i need to render a column value as clickable link and i also need to allow filtering on the basis of value in that column.
To perform actions like filtering, sorting, grouping Fields must be enabled to column. Based on the column value above actions will be performed. To perform filtering in template column,define the Field property to template column.
Refer the below code example
#(Html.EJ().Grid<EmployeeView>("ColumnTemplate")
.Datasource((IEnumerable<object>)ViewBag.datasource)
.AllowPaging()
.ToolbarSettings(toolBar => toolBar.ShowToolbar().ToolbarItems(items =>
{
items.AddTool(ToolBarItems.ExcelExport);
items.AddTool(ToolBarItems.WordExport);
items.AddTool(ToolBarItems.PdfExport);
}))
.Columns(col =>
{
col.HeaderText("First Name").Field(“FirstName”).Template("#columnTemplate").TextAlign(TextAlign.Center).Width(80).Add();
col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).Width(100).Add();
col.Field("LastName").HeaderText("Last Name").Width(100).Add();
col.Field("BirthDate").HeaderText("Birth Date").TextAlign(TextAlign.Right).Width(100).Format("{0:MM/dd/yyyy}").Add();
col.Field("Country").Width(100).HeaderText("Country").Add();
})
)
Please get back to us if you have further queries.

AG-Grid: Add and remove columns in column groups while maintaining the state of other columns

I have a table built with AG Grid which needs to display different columns depending on the type of data we give it. This is proving slightly difficult, as I can't find a proper interface in AG Grid which allows you setup new columns in existing column groups, and without blowing up user-driven changes (hidden columns, resizing, pinning, etc).
The biggest issue is that I can't figure out how to access column group definitions.
gridOptions.api.getAllColumns()
This function from aggrid does not directly provide column groups, just the child columns. Looping through the columns via this function, they have a parent property, but that does not include the coldef for the column group, which means there isn't even really a way to reconstruct the coldef based on the data you get from it (also, the parent property is private in typescript).
Here is a rough plunker, modified from one of the ag grid documentation examples which illustrates it
https://plnkr.co/edit/C8TrwlkFDg5O5V1RJkng?p=preview
I did try having all the columns present in the table at all times, and hiding them programmatically based on the incoming data, however that creates several issues with the default column show/hide functionality (you can manually show the invalid columns). Using the initial coldefs won't work too well either, since that will discard any modifications the user has made to the columns.
Is there anyone out there who can point me in the right direction?

How to programmatically create ListView based off SQLite query?

I have some code that allows the user to perform a search by selecting a few checkboxes. A sql query is then created based on what checkboxes are checked. (Up to 5 checkboxes)
The data is then queried against a sqlite data.
The issue is now how do i populate the data into a listview (not knowing how many columns there will be ahead of time (Could be anywhere from 1 to 5)
All the examples I"ve seen is where the listView is created and you know exactly how many colummns are going to be returned.
A previous posted suggested to query all the records and then use if statements to determine if the value is null then hide column.