I am using MUI DataGrid to display a few datasets on the same page and I would like to enable server side sorting, so that when the user sorts, I would also pass in a string to the handler so I can use it to re-fetch data.
<DataGrid
rows={rows}
columns={columns}
sortingMode="server"
sortModel={sortModel}
onSortModelChange={(model) => sortHandler(model)}
/>
...
const sortHandler = (model: GridSortModel) => {
console.table(model);
if (JSON.stringify(model) !== JSON.stringify(sortModel)) {
setSortModel(model);
}
};
The model in the example above will only expose field and sort (see below), but I need at least one more key in that object:
{
"field": "field1",
"sort": "asc"
}
How can I pass extra data to sortHandler, so I can then re fetch the data? Below are the options needed for the API call.
const options = {
...
nestedObj: {
...
},
obj1: {
name: DYNAMIC_VALUE1,
order: DYNAMIC_VALUE2,
rank: DYNAMIC_VALUE3,
},
obj2: {
name: DYNAMIC_VALUE1,
order: DYNAMIC_VALUE2,
rank: DYNAMIC_VALUE3,
},
};
Or is there a better approach? Using field is not enough.
Related
I have a requirement to add custom data attributes to the Fluent UI dropdown.
In javascript/html I could add them like this.
option data-passign="true" data-minpt="3" data-maxpt="6" value="7">Data Quality</option
Can someone help me achieve this in Fluent UI + React?
In FluentUI/React, it's much easier than that, no need for data- attributes, you can just add your custom data directly to the options list (and get it back in the event handlers, or as the selected value if you are using "controlled" scenario). Means, if you don't have a specific requirement to store additional item data in the HTML data attributes for "something else" (like ui-automation tool), then you could go with something like this (note the data property):
const YourComponent = (props) => {
const options = [
{ key: '7',
text: 'Data Quality',
data: { passign: true, minpt: 3, maxpt: 7 }
},
{ key: '42',
text: 'Weather Quality',
data: { passign: true, minpt: 100500, maxpt: 42 }
},
];
const onChange = (evt, item) => {
const itemData = item.data;
console.log(item.key, item.text, itemData);
};
return (
<Dropdown
label="Select something"
options={options}
defaultSelectedKey='7'
onChange={onChange}
/>
);
}
If you want a "controlled" control instead (this one is "uncontrolled"), check out the sample page for the Dropdown:
https://developer.microsoft.com/en-us/fluentui#/controls/web/dropdown
I am trying to add a delete button to every row of my tables rendered with react-bootstrap-table2. I have sorted data by category and placed in my local state
state = {
data: [
{
products: [
{
name: "Product 1",
price: "200"
},
{
name: "Product 2",
price: "300"
},
...
]
},
...
}
and rendered a separate table for each object in this.state.data and filled with the data from the products array from the corresponding object using this.state.data.map((category, index) => ..). I have also set the id of each of the tables to match the index of the this.state.data's object from where they were rendered from.
But where I struggle is, I want to add a delete button to each row; upon searching, I discovered the formatter property for columns that provides us cell, row, rowIndex but how can I access the table's id? So I can potentially use the code in my columns:
columns = () => {
...
{
isDummyField: true,
formatter: (cell, row, rowIndex) => {
return <Button
color="primary"
onClick={() => {
console.log (`Product ${rowIndex} of Category ${tableId} deleted`);
}>
Delete Product
</Button>
}
}
}
I'm lost on how to access tableId. Can anyone help me with this? I have always found react-bootstrap-tables very confusing.
I solved this problem from the back-end. Basically I added a unique id to each product and then in the button onClick=(), I simply accessed the product's unique id using row.id
I followed this video on the best practices for creating flat databases with firestore: Converting SQL structures to Firebase structures
I came up with something that looks like this:
const firestore = {
events: {
eventID: { // Doc
description: "Event Description", // Field
title: "Event Title", // Field
}
},
eventComments: { // Collection
eventID: { // Doc
comments: { // Field
commentID1: true, // Value
commentID2: true, // Value
commentID3: true, // Value
}
}
},
comments: { // Collection
commentID1: { // Doc
createdAt: "Timestamp", // Field
createdBy: "uid", // Field
content: "Comment Body" // Field
},
commentID2: {...},
commentID3: {...},
},
};
I'm not sure what the best way to get the related data is however
I'm using react and react-redux-firestore to access the data. My current setup for the app looks like this
<EventsDetailPage>
<Comments>
<Comment />
<Comment />
<Comment />
</Comments>
</EventsDetailPage>
I've come up with two potential methods...
Method 1
I have useFirestoreConnect in each component. The top level gets the event and passes the eventID to the comments component, the comments component uses the eventID to get the eventComments list which passes the individual commentID for each comment to the comment component, then finally the individual comment component uses the commentID to get the relevant comment data.
My issue with this: Wouldn't this mean that there is a listener for the event, comment list, and every individual comment? Is that frowned upon?
EX: This would be in the event, the comments, and comment component but each with respective values
useFirestoreConnect(() => [
{collection: 'events', doc: eventID},
]);
const event = useSelector(({firestore: {data}}) => data.events && data.events[eventID]);
Method 2
Let's say I have a list of events, I can do a query to get the lists
useFirestoreConnect(() => [{
collection: 'events',
orderBy: ["createdAt", "desc"],
limitTo: 10
}]);
const events = useSelector(({ firestore: { ordered } }) => ordered.events);
This is great because I believe it's one listener but if any of the data is changed in any of the events the listener will still respond to the changes.
My issue with this: I don't know how to do a where clause that would return all events for a given list of IDs.
So like say if I wanted to get a list of events with where: ['id', '==', ['eventID1', 'eventID2', 'eventID3']]
To retrieve up to 10 items by their ID, you can use an in query:
.where('id', 'in', ['eventID1', 'eventID2', 'eventID3'])
If you have more than 10 IDs, you'll have to run multiple of these queries.
I am using Fluent UI DetailsList. My table looks like below:
I need filters below every column (text or drop-down) as shown below:
Please let me know if this is possible? Or maybe a way to display custom header (using html) ?
This actually turned out to be easier than I thought it'd be...
If you're ok with clicking the column header to reveal the choices (vs having the dropdown directly under the title) then this can be achieved using the ContextualMenu component in conjunction with DetailsList. I got it working by tweaking from the variable row height example in the official docs: https://developer.microsoft.com/en-us/fluentui#/controls/web/detailslist/variablerowheights.
Add a ContextualMenu underneath your DetailsList:
<DetailsList
items={items}
columns={columns}
/>
{this.state.contextualMenuProps && <ContextualMenu {...this.state.contextualMenuProps} />}
Inside your column definition, set the hasDropdown action so the user gets a UI indicator that they can/should click the header, and call a contextMenu method (note I'm using onColumnContextMenu as well as onColumnClick so it doesn't matter if they left or right click the header:
{
key: 'dept',
name: 'Department',
fieldName: 'dept',
minWidth: 125,
maxWidth: 200,
onColumnContextMenu: (column, ev) => {
this.onColumnContextMenu(column, ev);
},
onColumnClick: (ev, column) => {
this.onColumnContextMenu(column, ev);
},
columnActionsMode: ColumnActionsMode.hasDropdown,
}
When the onColumnContextMenu method gets invoked, we need to build the context menu properties that will get consumed by the ContextualMenu component. Note the dismissal method as well, which clears out the state so the menu is hidden.
private onContextualMenuDismissed = (): void => {
this.setState({
contextualMenuProps: undefined,
});
}
private onColumnContextMenu = (column: IColumn, ev: React.MouseEvent<HTMLElement>): void => {
if (column.columnActionsMode !== ColumnActionsMode.disabled) {
this.setState({
contextualMenuProps: this.getContextualMenuProps(ev, column),
});
}
};
Finally, inside of getContextualMenuProps you need to determine what the options should be for the user to click. In this example, I'm simply giving sort options (you'll need to add an onClick handler to actually do something when the user clicks the item), but I'll use the column to determine what those items should actually be and paint the filters into the items collection so the user can select one to filter.
private getContextualMenuProps = (ev: React.MouseEvent<HTMLElement>, column: IColumn): IContextualMenuProps => {
const items: IContextualMenuItem[] = [
{
key: 'aToZ',
name: 'A to Z',
iconProps: { iconName: 'SortUp' },
canCheck: true,
checked: column.isSorted && !column.isSortedDescending,
},
{
key: 'zToA',
name: 'Z to A',
iconProps: { iconName: 'SortDown' },
canCheck: true,
checked: column.isSorted && column.isSortedDescending,
}
];
return {
items: items,
target: ev.currentTarget as HTMLElement,
directionalHint: DirectionalHint.bottomLeftEdge,
gapSpace: 10,
isBeakVisible: true,
onDismiss: this.onContextualMenuDismissed,
}
}
Note the target on the ContextualMenuProps object, which is what tells the ContextualMenu where to lock itself onto (in this case, the column header that you clicked to instantiate the menu.
Detail list filter for each column without context menu -
https://codesandbox.io/s/rajesh-patil74-jzuiy?file=/src/DetailsList.CustomColumns.Example.tsx
For instance - Providing filter in text field associated with each column will apply filter on color column.
I am using react-admin's useGet... query to gather data from my rails backend. The main problem here is the filter property (the last pair of curly braces in the useGetList operation). How can i filter the data by Dates (like get only transactions of the last month etc.)
This is the current (working) approach:
const { data, loading, error } = useGetList(
'transactions',
{ page: 1, perPage: 10000 },
{ field: 'id', order: 'ASC' },
{},
)
if (loading) return <p>Loading</p>
if (error) return <p>Error</p>
if (!data) return null
The entries in the database all have a createdAt and updatedAt property.
My approach would be to create a filter like this:
// constraints could be dates that I can easily set beforehand
{
{'createdAt', desiredLowerTimeConstraint, operation: '<='},
{'createdAt', desiredUpperTimeConstraint, operation: '<='}
}
The react-admin documentation is quite sparce with the filter property, I couldn't find good examples for how these objects are supposed to look like.
It all depends on how your API expects filters to look like.
For instance, in REST APIs served by JSONServer, a _lte suffix on a query string parameter name indicates that you want results "Less Than or Equal to" the value:
GET /transactions?createdAt_lte=2019-12-05
Provided you use the ra-data-simple-rest, you can craft this request by passing the parameter in the filter:
const { data, loading, error } = useGetList(
'transactions',
{ page: 1, perPage: 10000 },
{ field: 'id', order: 'ASC' },
{ createdAt_lte: '2019-12-05' },
)
If your API behaves differently, then you may use the same syntax for useGetList, and transform the parameter in your dataProvider before it's sent to the API.