I am using MUI's Data Grid Pro's new api.exportState() function. In the provided example available here, it is possible to hide a column and have this reflected in the output of the exportState function (the 'columnVisibilityModel' field of the JSON):
{
"columns": {
"columnVisibilityModel": {
"id": false,
"commodity": false
}
....
}
}
However, when running locally, the output of the export state function does not include this field. All other fields such as dimensions, filter, sorting etc. are present. Both my local version and the one in the example are v.12.0
Related
I recently changed my tables to Mui-datagrid on Material UI 5, and I have a special use case with an array of objects. I want to enable the phone number filter in this column, but the number is provided as an object list.
phone: [
{ type: "home", number: "795-946-1806" },
{ type: "mobile", number: "850-781-8104" }
]
I was expecting a 'customFilterAndSearch' or an option to customise how to search in this specific field.
customFilterAndSearch: (term, rowData) =>
!!rowData?.suppressedOptions.find(({ description }) =>
description?.toLowerCase().includes(term.toLowerCase())
),
I have made some tries with the filterOperators, but no success yet. I have made a full example here https://codesandbox.io/s/mui-data-grid-vs05fr?file=/demo.js
As far as I can see from the DataGrid documentation I don't see any way to change the filter function for a specific function.
Likely the best workaround for your use case will be converting this to a string be converting the data to a string before you pass it to the datagrid. Though you will lose the styling that you currently do by making the phone type bold.
On second though your best best would probably be to split the phone column into two columns which would probably be the cleanest way of solving your problem
Add helper function.
You could potentially add a helper function to just map all the phone lists to something like mobilePhone or homePhone
const mapPhoneObject = (rows) => {
rows.forEach((row) => {
row.phone.forEach((phone) => {
row[`${phone.type}Phone`] = phone.number;
});
});
return rows
};
I've added a fork of your snippet with my function, it is I think the most viable solution for your problem: https://codesandbox.io/s/mui-data-grid-forked-ppii8y
When using Ag-Grid's server side row model, I am unable to send a custom group key to the server in order to do proper group by queries.
My row data is a simple JSON structure but with one composite object.
row = {
athlete: '',
age: '',
country: {
name: 'Ireland',
code: 'IRE'
},
...
}
I am using the server side row model. To get the grid to display the country name is simple enough as I use the following column definition.
{
headerName: "Country",
colId: "country",
valueGetter: "data.country.name",
enableRowGroup: true
}
However, when I group by the Country column ag-grid sends the groupKey as 'Ireland' from my example above. But I need the group key to be the country code, 'IRE'. I cannot figure out how to generate a groupKey when using the server-side row model.
I have seen the keyCreator method, but this only works for client-side row model. In addition, I have seen the Tree Data Mode which has a callback for getServerSideGroupKey(dataItem) but then callback only gets used when gridOptions.treeData = true and when the treeData option is set to true, a "Group" column is always displayed regardless if a grouping is happening or not. I tested this out by setting isServerSideGroup: function(dataItem) {return false;}
Any help would be appreciated.
I was able to solve this issue by using the dot notation for the column definition's field attribute and a custom cellRenderer.
{
headerName: "Country",
colId: "country",
field: "country.code",
enableRowGroup: true,
cellRenderer: function (params) {
return params.data.country.name;
}
}
This allowed me to display the correct data point from the custom object and when doing server side actions, ag-grid will send the datapoint contained within the field attribute.
I'm building a typeahead component for my Vue application that searches Algolia, which has several different indexes to search in different places, so I've created props to be passed in to set the input placeholder, search index, and displayKey.
All works well except my highlighting function for suggestions.
I'm sure this is something simple but I can't get the highlight return to pick up the dynamic prop passed in.
$('.typeahead').autocomplete({ hint: false }, [{
source: $.fn.autocomplete.sources.hits(this.client, { hitsPerPage: 5 }),
displayKey: this.display,
templates: {
suggestion: (suggestion) => {
return suggestion._highlightResult.{this.display goes here}.value;
}
}
}]).on('autocomplete:selected', (event, suggestion, dataset) => {
console.log(suggestion, dataset);
})
If I omit the highlighting all works perfectly.
I knew it was simple, call it via array key instead of dot notation.
return suggestion._highlightResult[this.display].value;
I have crated a basic antd controled form synchronized with my state in Redux store, when fields changes are transmited to my store via the onFieldsChange method i get an object with some unwanted propretys in my state.
For the code you can take the one provided in the official documentation
Store Form Data into Upper Component
the received object is like one below :
{
"username": {
"value": "test",
"name": "username",
"touched": true,
"dirty": false,
"validating": false
}
}
I want to keep my state clean and store only the value, in my state, are these other properties needed or can be recreated like as in the initial load ?
I am using MongoDB for storing data in my application. I need to show the user how much data they filled using percentage.
For example: I have USER collection. In this collection i have several fields. Once the user enter data in their profile. I need to show how much percentage of data they filled in their profile.
In my application. I am using MongoDb and loopback frame work. I didn't defined any property in models.
How to solve this problem.Please help!!
You can add properties in you user model and define percentage against that or you can define one object property like the below mentioned
Suppose you have a User model and in it is settings property, of type object
Settings object will gave 10 keys. 1 keys is 10% then 10 keys filled is
100%. So just check whether user have filled the desired setting and mark a percentage.
so your model will be like
{
"name": "Member",
"base": "User",
"properties": {
"email": {
"type": "string"
},
"settings": {
"type": "object"
}
}
}
and inside your code retrieve the settings object and loop through it to make your percentage
Member.findById(your_id, function(err, usr){
if(!err){
var percentage_completed = 0;
Object.keys(usr.settings).map(function(pro){
if( usr.settings[pro] != "" ){
percentage_completed+=10;
}
})
}
})
I hope this will serve your purpose.