I'm currently attempting to build an Airtable-esque filter component. I'm wondering if it is possible to use the useGlobalFilter hook to choose what columns to filter a table by programmatically. For example, Airtable implements table filtering using a component that lives outside of a given table's boundaries. Inside of this component, there is a dropdown menu to choose which column to apply a filterValue and a dropdown to choose the filterType for a given column. Based on react-table's documentation, it appears that useGlobalFilter is used to build filtering components that exist outside of the table. However, based on the documentation's code sandbox example, for filtering, it also appears that useGlobalFilter applies the filter value to all columns rather than to specific columns.
My question would be if it's possible to use useGlobalFilter's ability to create filtering UI outside of a table and have a way to select what columns to apply a filterValue & filterType, all from within the global filter?
If this is possible, would anyone be willing to provide tips or advice on the implementation? Please let me know if this task would be more suited for useFilter or another part of react-table's API.
I've provided a screenshot of Airtable's filter component as an example of what I'd like to build. Any feedback or advice would be much appreciated!
`const columns = React.useMemo(
() => [
{
Header: 'Group Name',
accessor: 'name',
// disableGlobalFilter: true
},
{
Header: 'Created',
accessor: 'sector',
disableGlobalFilter: true,
},
],
[]
)`
Add this in the column array inside the column where you want to disable global filter
Related
i have set up gtag.js and i am able to send custom events and view them in the data studio.
However i do not know how to pass custom properties so the names and values of these show up in the data studio and i can "select" them for a graph.
my sample code is the following
window.gtag('event', 'Old Layout', {
event_category: 'Layout changes',
event_action: 'change layout',
event_label: 'switch to old layout',
event_value: $(this).prop('checked'),});
but when i try to select dimensions it only gives me "event name" and "is conversion event".
How should i pass the custom properties so i can select as "dimension"?
You need to define the properties as custom dimensions or metrics in the Configure->Custom definitions section. If you then refresh the fields in the data source, they should show up.
You can use more descriptive properties in GA4. And use their naming convention so your events will be usable. e.g.
window.gtag('event', 'layout_changed', {
layout_used: $(this).prop('checked') ? 'new' : 'old'
});
I am building a lightning datatable with Aura component and I am showing data in this table from external system and I want to select one or more record so that I can import selected data in salesforce and after importing I want to to highlight that rows which had selected and imported in salesforce.
enter image description hereWhen you import data from external source than add an extra key value in json or js-object.,let's say isExternal which has value =''slds-theme_success" and use it is cellAttributes in lightningdatable, you can use cellAttributes in each column to highlight whole row.
Ex:-
Columns=[{ label: 'test', fieldName:'test' , cellAttributes:{class: { fieldName: 'isExternal' }} } ];
On the material table library, I am trying to filter a field that is custom rendered. The official document does not have any example of custom column rendering plus filtering that column. I have tried to use the lookup function, but I am not successful.
Here is the official document: https://material-table.com/#/docs/features/filtering
Here is an implementation: https://codesandbox.io/s/material-table---create-dinamic-object-to-lookup-forked-9px53?file=/src/index.js
What would be my best option here?
I have found out that the field customFilterAndSearch can help me on this one. For the ones who arrived here, to solve the problem I have made a quick search on my array:
customFilterAndSearch: (term, rowData) => {
return rowData.lived.find((place) => {
return place?.name?.toLowerCase().includes(term.toLowerCase());
});
}
https://codesandbox.io/s/material-table---create-dinamic-object-to-lookup-forked-2ed1n?file=/src/index.js
let me know if you think I could improve this.
I want to set filer to a column in ui-grid dynamically using gridOptions.columnDef using column name. Right now I am only able to use number as a key.
How can I add multiple filters on a single column dynamically?
Try creating a custom filter for your grid item and then in the logic there you can do whatever you want. Something like this
field: 'myfilteredfield',
filter: {
condition: myCustomFilter
}
and in your controller
$scope.myCustomFilter = function(searchTerm,cellValue,row,column) {
};
Look here for details http://ui-grid.info/docs/#/api/ui.grid.class:GridOptions.columnDef
I am using ui-grid version v3.0.0-rc.21-1d9f81f - 2015-05-01 and trying to sort a given grid according to a given column name. I cannot sort it externally (from javascript code), only by defining it and by clicking on the grid's headers.
Is it possible in this version to sort the grid's data according to the grid's column name via javascript code?
If you want to sort it just based on a column/field before the grid is loaded, you can do so just by using the angular orderBy filter whenever your data is retrieved from the server.
$filter('orderBy')(array, expression, reverse)
Or If you wanted to sort the grid at the initial state, you can define it in the columnDef with the sort property
{
field: 'gender',
sort: {
direction: uiGridConstants.ASC,
priority: 0,
}
}
Take a look at this plnkr http://plnkr.co/edit/4qQgi76RQpYxbRgbcByX?p=preview