Is there any way to remove the currency prefix from react's material-table since I am using different currencies on the table, it becomes confusing to stick to just one prefix as I have a different column to display the type of currency
Any help would be appreciated, thanks
Here is a chunk of the source code for creating the table, I am getting the data from an API endpoint
<MaterialTable style={{marginLeft:'10px', marginRight:'10px'}}
title="INVOICES"
columns={[
{ title: 'Seller Name', field: 'seller' },
{ title: 'Buyer Name', field: 'buyer' },
{ title: 'Invoice No', field: 'invoice_number' },
{ title: 'Currency', field: 'currency' },
{ title: 'Amount', field: 'invoice_amount', type:'currency', currencySetting:{ currencyCode:'USD', minimumFractionDigits:0, maximumFractionDigits:2}},
{ title: 'Invoice Date', field: 'invoice_date' },
{ title: 'Eligible Date', field: 'date_eligible' },
{ title: 'Due Date', field: 'due_date' },
{ title: 'Status', field: 'status' },
]}
data={this.state.stats}
I'm not using material-table, but I played a little with it. This is the the source code of material-table where the error has created:
Intl.NumberFormat(currencySetting.locale !== undefined ? currencySetting.locale : 'en-US', {
style: 'currency',
currency: currencySetting.currencyCode !== undefined ? currencySetting.currencyCode : 'USD',
minimumFractionDigits: currencySetting.minimumFractionDigits !== undefined ? currencySetting.minimumFractionDigits : 2,
maximumFractionDigits: currencySetting.maximumFractionDigits !== undefined ? currencySetting.maximumFractionDigits : 2
}).format(value !== undefined ? value : 0);
It uses the Intl.NumberFormat standard Javascript function to format the currency. This function supports 47 country.
You can play with this function here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
For example for Hungary (my country) I can call it with:
new Intl.NumberFormat('hu', { style: 'currency', currency: 'huf' }).format(number);
So I should change the columnDefinition to:
{ title: 'Amount', field: 'invoice_amount', type:'currency', currencySetting:{ locale: 'hu',currencyCode:'huf', minimumFractionDigits:0, maximumFractionDigits:2}},
Please note, that I added a locale: 'hu' and I changed the currencyCode to 'huf'.
If your country is not in the supported countries. Try something else with similar formatting.
Related
Description: I'm trying to format the dateTime I get from an Activity data array. I'm certain the tabular data isn't empty or nullish since I've been using a different table library on which it displays.
Problem: The page displaying my activity list table crashes as it can not find a defined date in the data I've given it. This is likely due to me not guessing the data type of the valueGetter() when I define columns. The documentation and tutorial I've found were in javascript, so I couldn't get the answer from them.
Here's the ActivityModel interface:
export interface ActivityModel extends obj {
id: string
key: string
title: string
description: string
dateTime: Timestamp
duration: number
notes: string
type: string
activity: string
completed: boolean
material: string
size: string
assignedTo: string
value: string
unit: string
editable: boolean
}
And here's the Activities page:
const [columnDefs] = useState([
{ field: "title", headerName: "Title", filter: "agTextColumnFilter" },
{
field: "description",
headerName: "Description",
flex: 3,
filter: "agTextColumnFilter",
},
{
field: "startDate",
headerName: "Start Date",
flex: 2,
filter: "agDateColumnFilter",
valueGetter: (p: ActivityModel) => {
return formatDate(p.dateTime.toDate())
},
},
{
field: "completed",
headerName: "Completed",
filter: "agTextColumnFilter",
},
])
<div className="ag-theme-alpine" style={{ height: 400, width: 1200 }}>
<AgGridReact
defaultColDef={defaultColDef}
rowData={activities}
columnDefs={columnDefs}
onGridReady={pullActivities}
></AgGridReact>
</div>
I am developing a React Admin Page for Woocommerce. I want to retrieve the 'option' value from a specific object (product attribute with name = "Farbe") to display in a MUI DataGrid. I think that valueGetter would be the right approach, but can't get it to work.
Here's what I have:
The Woocommerce Product (row record):
{
"id": 232,
"date_created": "2022-08-14T08:02:18",
...
"attributes": [
{
"id": 0,
"name": "Farbe",
"option": "0045"
},
{
"id": 1,
"name": "Material",
"option": "Cotton"
},
...
],
...
}
The DataGrid column:
I am trying to select the object that has the value 'Farbe' on the key 'name' and access the value of the property 'option'
export const VariationColumns = [
{ field: 'id', headerName: 'Id', type: 'int', width: 100},
{ field: 'sku', headerName: 'SKU', type: 'string', width: 200},
{ field: 'name', headerName: 'Name', type: 'string', width: 500,
valueGetter: ( params ) => { return params.row.attributes[name =>'Farbe'].option }},
]
But it can't find the 'option' property:
"TypeError: Cannot read properties of undefined (reading 'option')"
Also tried:
valueGetter: ( params ) => { return params.row.attributes[name =>'Farbe'].option.value
valueGetter: ( params ) => { return params.row.attributes.name['Farbe'].option
valueGetter: ( params ) => { return params.row.attributes.name['Farbe'].option.value
Is there maybe a completely different approach needed to achieve this?
Any hint is greatly apreciated
Assuming that your rows prop looks like the record you provided above, you'd get it like so:
const rows = [
{
id: 232,
date_created: "2022-08-14T08:02:18",
attributes: [
{
id: 0,
name: "Farbe",
option: "0045",
},
{
id: 1,
name: "Material",
option: "Cotton",
},
],
},
];
const variationColumns = [
{ field: "id", headerName: "Id", type: "int", width: 100 },
{ field: "sku", headerName: "SKU", type: "string", width: 200 },
{
field: "attributes",
headerName: "Name",
type: "string",
width: 500,
valueGetter: (params) => {
return params.value.find((item) => item.name === "Farbe").option;
},
},
];
The key points are:
valueGetter params are cell params vs row params
The field property in the columns needs to match the field in your rows, so if you want to grab attributes you need to have field: "attributes" in your columns.
You can use params.value.find((item) => item.name === "Farbe").option) to return the object in the array that matches your desired search string, then access its option property.
I have a react material-ui DataGrid.
One of the cells shows text data representing status, which I want to show in a graphical way - specifically bootstrap badge.
The DataGrid code is:
const ProcessesColumns: ColDef[] = [
{ field: 'id', headerName: 'ID' },
{ field: 'name', headerName: 'Name', width: 300 },
{ field: 'status', headerName: 'Status', width: 130 },
];
const processes = [
{
id: 1,
name: 'aaa',
status: 'Sucess',
},
{
id: 2,
name: 'bbb',
status: 'Fail',
},
{
id: 3,
name: 'ccc',
status: 'Sucess',
},
{
id: 4,
name: 'ddd',
status: 'Success',
},
{
id: 5,
name: 'eee',
status: 'Sucess',
},
{
id: 6,
name: 'fff',
status: 'Fail',
},
]
<DataGrid rows={processes} columns={ProcessesColumns} pageSize={10} />
I think you should check this
You can add a renderCell attribute on your status column definition
I think you can do it with renderCell. Here's an example of something similar, and I hope it helps.
I have a column which cells I want to format to have an icon and a value, and I created that in a format function:
const priorityFormater = (cell) => {
return (
<span>
<GrStatusGoodSmall className={taskPriorityColor(cell)} />
<span className="priority-span">{cell}</span>
</span>
);
};
Column definition:
{
field: "priority",
headerName: "Priority",
flex: 0,
minWidth: 140,
renderCell: (params) => {
return priorityFormater(params.value);
},
},
Result:
below is my code:
const data = [];
Object.keys(json).forEach(key => {
const jobStr = json[key];
console.log(`=== historicalJobCallback jobStr: ${jobStr}`);
const jobItem = jobStr.split(',');
data.push({
jobId: <a href={Utils.getLungoEndpoint() + jobItem[0]} target="_blank" rel="noopener noreferrer"
className={classes.link}>{jobItem[0]}</a>,
jobName: jobItem[1],
submittedBy: jobItem[2],
submittedTime: jobItem[3],
tenant: jobItem[4],
business: jobItem[5]
})
});
setState({
columns: [
{
title: 'Job ID',
field: 'jobId',
render: rowData => <a href={Utils.getLungoEndpoint() + jobItem[0]} target="_blank"
className={classes.link}>{jobItem[0]}</a>
},
{title: 'Job Name', field: 'jobName'},
{title: 'Submitted By', field: 'submittedBy'},
{title: 'Submitted Time', field: 'submittedTime'},
{title: 'Tenant', field: 'tenant'},
{title: 'Business', field: 'business'},
],
data: data
});
As you can see the jobId column is a link, the search feature works for other columns except the job id column, I suspect it is due to the job id text is wrapped in a link, how can I make it searchable?
thanks for the suggestion by #Yatrix, made my code like below and the search is now working for link:
Object.keys(json).forEach(key => {
const jobItem = json[key].split(',');
data.push({
jobId: {
name: jobItem[0],
url: Utils.getLungoEndpoint() + jobItem[0]
},
jobName: jobItem[1],
submittedBy: jobItem[2],
submittedTime: jobItem[3],
tenant: jobItem[4],
business: jobItem[5]
})
});
console.log(`=== historicalJobCallback data: ${JSON.stringify(data)}`);
setState({
columns: [
{
title: 'Job ID',
field: 'jobId',
customFilterAndSearch: (term, rowData) => (rowData.jobId.name).indexOf(term) != -1,
render: rowData => <Link href={rowData.jobId.url} target='_blank'
color='secondary'>{rowData.jobId.name}</Link>
},
{title: 'Job Name', field: 'jobName'},
{title: 'Submitted By', field: 'submittedBy'},
{title: 'Submitted Time', field: 'submittedTime'},
{title: 'Tenant', field: 'tenant'},
{title: 'Business', field: 'business'},
],
data: data
});
I am generating dataTable using material-table plugin in ReactJS. I couldn't find any direct way or option to generate rowspan or column span at dataTable using the plugin. Is there any way to do it ?
Here is a sample screenshot of what table might look like but will be shown via dataTable
The explanation of what you are trying to do is a little bit unclear.
If you want to add something like a button on each row in a col span you can define it in the "columns" prop of your Table like so:
columns={[
{ title: 'Update', field: '', render: rowData => <button onClick={() => doSomethingWithId(rowData.id)} className="myTableButtonStyle" /> },
{ title: 'Name', field: 'name' },
....
]}
This will add an update button which will call on the doSomethingWithId() function passing the id of the line as a parameter.
Is it what you are looking for? Else would you mind explaining a little bit more what you want?
EDIT
Here is what i obtain
with the following code
<MaterialTable
data={[
{ name: '', nationality: 'British', address: '', country: 'England' },
{ name: 'Noor', nationality: 'American', address: 'California', country: 'US' },
{ name: '', nationality: 'Chinese', address: '', country: 'China' },
{ name: '', nationality: '', address: '', country: '' },
]}
columns={[
{ title: 'Name', field: 'name' },
{ title: 'Nationality', field: 'nationality' },
{ title: 'Address', field: 'address' },
{ title: 'Country', field: 'country' },
]}
options={{
rowStyle: {
height: '25px',
},
}}
title="Display Data"
/>
You don't need to add rows or colspan to achieve this render, just giving the good dataSet and the Columns definition will do.
In your data props you need to give a list of objects with all the datas you need.
You then define which datas are displayed where with the columns props. if you want a more personalize render in one column (ex: you want to display the country in bold) you can define it by giving a render in the columns object like so:
{title: 'Country', field: '', render: rowData => <strong>{rowData.country}</strong>
for the empty row to have the same size as others, use props options on your table.
Does this help you?