I have react component where I am using useMemo to define table structure. My data is coming via API in DateTime (Web API C#). I tried to use moment to convert date Time format but unable to do so.
current time format without moment 2020-12-18T14:00:00
const scheduleColumns = useMemo(
() => [
{
Header: "Site ID",
accessor: "siteId",
},
{
Header: "Start Time",
accessor: moment("startTime").fromNow(),
},
],
[]
);
..Table
<TableItemsTabs
apiUrl={api.myAPI}
columns={scheduleColumns}
></TableItemsTabs>}
Even found more simpler solution, doesn't even need any module
let a = new Date('2020-12-18T14:00:00');
a.toLocaleString('en-GB');
// Output - "18/12/2020, 14:00:00"
Related
We are migrating our tables from v7 to v8. And I'm kinda got a problem with cells conditional styling.
So basically what I want to do is, based on a status (which is coming to table data) I need to add a specific className to every cell in a row.
In v7 we used this: https://react-table-v7.tanstack.com/docs/examples/data-driven-classes-and-styles
But in v8 I can't find anything like that....
So far I tried to use meta in column definitions https://tanstack.com/table/v8/docs/api/core/column-def#meta where I can set some values to className property, and use it in my JSX like this:
className={cell.column.columnDef.meta?.className}
But problem is anything I can set to meta are static values. For my case I need to set specific className based on my status value. And seems like in meta we can't access any cell props...
const driverFormatter = ({ row }) => {
const { status } = row.original;
return <span>{status}</span>;
};
const columns: ColumnDef<any,any>[] = [
{
accessorKey: "customerName",
header: "Customer"
},
{
accessorKey: "driver",
header: "Driver",
enableSorting: false,
cell: driverFormatter,
meta: {
className: "disabled",
},
},
...
So is there are any way of achieving that using v8???
Thank you!
I want to render a Matial UI datagrid with an initial filter model so only upcoming dates are shown. (until the user clears the default set filter)
I have no problems creating a filter for the date after the datagrid is loaded without any initialState set.
manually setting filters after rendered datagrid
However! When I attempted the initial filter model involving the date column
initialState = {{
filter: {
filterModel:{
items: [{
columnField: 'class_end_date',
operatorValue: 'onOrAfter',
value: new Date()
}],
}
}
}}
I continually get Uncaught TypeError: filterItem.value.match is not a function
top of the stacktrace
buildApplyFilterFn gridDateOperators.js:10
getApplyFilterFn gridDateOperators.js:62
Errors resulting from default filter model
I am assuming there's some kind of type conversion I need for the value property in the items filter object. Still researching, but I can't find anything helpful in MUI docs hence far.
If anyone has tackled this one I'd be grateful for a step in the right direction! Thank you.
I also ensured that my type and valueGetter were defined appropriately in my columns array. Remember I want an initial state filter model for class_end_date
{
field: 'class_start_date',
headerName: 'Start Date',
width: 140,
type: 'date',
valueGetter: (params) => {
return new Date(params.value)
}
},
{
field: 'class_end_date',
headerName: 'End Date',
width: 140,
type: 'date',
valueGetter: (params) => {
return new Date(params.value)
}
},
I've also tried using dateTime for the column type, formatting the dates from the valueGetters and the filtermodel value to mm/dd/yyyy format,
and I tried ensuring the value property was a string
filterModel:{
items: [{
columnField: 'class_end_date',
operatorValue: 'onOrAfter',
value: `${new Date()}`
}],
}
I am looking for a way to show events in an Ant Desing Calendar using dateCellRender with the dates from an variable object, like this one:
[
{
"id": 1,
"content": "Example",
"date": "01/05/2022",
"horario": [
"2022-05-26T06:00:00.925Z",
"2022-05-26T07:00:00.478Z"
],
},
{
"id": 2,
"content": "Example",
"date": "08/05/2022",
"horario": [
"2022-05-26T11:00:00.859Z",
"2022-05-26T14:00:00.976Z"
],
}
]
The normal way to show events is using a switch, like you can see in this CodeSandbox from AntD: https://codesandbox.io/s/ruj266
My object comes from the backend and will always change, there is a way to show dynamic events using that object?
Since antd calendar works with moment object, so when you try to render the calendar, you can covert the value of current date to string by using format method of moment object like this:
<Calendar dateCellRender={(value) => {
const stringValue = value.format("DD/MM/yyyy");
return (...);
};} />;
and compare the result of format method with date values in your data, I implemented an example by using of your data example here on codesandbox:
antd-calendar-example
is this what you are looking for?
I'm currently using Redux to fetch data from an API. I am then using this data to populate a DataGrid component from Material-UI. Below is what the api response looks like:
Below is what I currently have setup for the column definitions:
The DataGrid seems to be able to recognize the id field from the results, as seen below, however, I cannot seem to drill down into attributes to get further details.
I'm looking for a solution that will allow me to display the attribute data, along with the id. All help is appretiated, thank you!
You can use valueGetter:
const columns = [
// ...
{
field: 'attributeName',
headerName: 'Attribute Name',
valueGetter: (params) => {
return params.getValue(params.id, "attributes").name;
}
},
// ...
];
You may also need a sortComparator to handle the sorting of this column.
try something like this to map the data out obviously change around the names as needed
const detailsRows = rows.map((row) => {
return {
id: row.item_id,
model: row.model_no,
title: row.title,
};
and then pass it in to DataGrid like this
<DataGrid rows={detailsRows} columns={props.columns} pageSize={10}/>
const HEADER = [
{label: "NAME", key: "name"},
{label: "NUMBER", key: "mobilenumber"}
];
I'm implementing React-intl on my existing react application. whereas in my application, there are some table headers dynamically coming from the const. Is there any way to format the label value in const using React-intl? Thanks in advance.
i can able to format the below one like:
Actual code:
const details = ["Contact Number", "Address"]
with react-intl:
const details = [<FormattedMessage id="number"/>,<FormattedMessage id="address"/>] --->this works