im using materialtable for my application and i need to style my column header text to center....the data being displayed is getting aligned but not the header.....i used headerStyle...im able to change the text color but not the text alignment....i dnt want to use "TableHeader" from materialtable as im using sorting on my columns and when im using the TableHeader the sorting functionality is not working...i looked into TableSortLabel and the sorting implemenation looked very complicated...can anyone help with this
<MaterialTable
className="-striped -highlight"
title="Settlements"
columns={[
{ title: 'Code', field: 'eCode', sortable: true,wrap: true,align:'left'},
{ title: 'Name', field: 'eName', sortable: true, wrap: true,align:'left'},
{ title: 'Amount', field: 'pAmount', sortable: true, wrap: true,align:'center',
customSort:(a,b)=>(a.pAmount)-(b.pAmount) },
options={{
headerStyle:{color:'red',textAlign:'center'},
exportButton: true,
exportAllData: true,
thirdSortClick: false,
actionsColumnIndex: -1,
pageSize: (this.state.data.length > 50) ? 50 : this.state.data.length,
pageSizeOptions: [10, 25, 50, 100],
rowStyle: rowData => ({
backgroundColor: (rowData.tableData.id % 2 === 0) ? '#FFF' : '#E5EEF6'
})
}}
Related
I am working on grid using AgGridReact and enabling rowGrouping by setting it to true. However, it only adds the column "Group" but no actual grouping happens
const columnDef = [
{field: "module", width: 120, rowGroup: true, hide: true},
{headerName: "Ref Name", field: "referenceName", width: 120, },
{headerName: "ID", field: "referenceId", width: 120, }
]
const gridOptions = {
columnDefs: columnDef,
animateRows: true,
defaultColDef: {
sortable: true,
resizable: true,
enableRowGroup: true
},
rowData: mediaUsage
}
As you can see in the below image, it only adds GROUP column but no actual label appears
It should be group by Module column which is below
I've watched multiple tutorials and it's the rowGroup property that will display the grouping, but it doesnt in my case. Hope anyone could help. Thanks!
I don't wanna show id field of my table.I use "#mui/x-data-grid":"^5.6.1" version. Here is my code;
import * as React from 'react';
import { DataGrid } from '#mui/x-data-grid';
const columns = [
{ field: 'id', headerName: 'ID', width: 50},
{ field: 'testName', headerName: 'Test Name', width: 120,},
{ field: 'testDate', headerName: 'Test Date', width: 160 },
];
export default function DataTable(props) {
const rows = [id:1, testName:"test", testDate:"23/03/2022"];
return (
<div id="resultTable" >
<DataGrid
rows={rows}
columns={columns}
pageSize={5}
rowsPerPageOptions={[5]}
/>
</div>
);
}
Id column can be hidden or display:none. I tried to use
display:false
or:
hidden: true
and also tried:
options: {display: false, filter: false,}
but it wasnt work.
I found the solution.
{ field: 'id', headerName: 'ID', width: 50, hide: true}
This is enough for me.
According to MUI documentation, hide: true is now deprecated.
Instead you should use the Column Visibility Model.
Example from the documentation:
<DataGrid
initialState={{
columns: {
columnVisibilityModel: {
// Hide columns status and traderName, the other columns will remain visible
status: false,
traderName: false,
},
},
}}
/>
Expanding on Robinson's answer from the docs There's also a way to do this programmatically. I used this code to hide some columns on mobile version.
export const MOBILE_COLUMNS = {
id: true,
value: true,
value2: false,
value3: false,
};
export const ALL_COLUMNS = {
id: true,
value: true,
value2: true,
value3: true,
};
const theme = useTheme();
const matches = useMediaQuery(theme.breakpoints.up("sm"));
const [columnVisible, setColumnVisible] = React.useState(ALL_COLUMNS);
React.useEffect(() => {
const newColumns = matches ? ALL_COLUMNS : MOBILE_COLUMNS;
setColumnVisible(newColumns);
}, [matches]);
return (
<DataGrid
rows={rows}
columns={columns}
columnVisibilityModel={columnVisible}
/>
)
GridColDef.hide prop is deprecated, you should use the column visibility to hide the unwanted columns: https://mui.com/x/react-data-grid/columns/#controlled-visible-columns
I know that this question is already answered, but what I encountered was that I needed to hide a field but retrieve its value once I edit a row, which is also what OP commented on one of the answers.
The solution for this is adding the editable prop to the field like so:
{field: 'id', hide: true, editable: true}
Try removing the first object in columns array like so
const columns = [
//{ field: 'id', headerName: 'ID', width: 50}, //or delete it entirely
{ field: 'testName', headerName: 'Test Name', width: 120,},
{ field: 'testDate', headerName: 'Test Date', width: 160 },
]
or add the property hide: true and editable: true
const columns = [
{ field: 'id', headerName: 'ID', width: 50, hide: true, editable: true},
{ field: 'testName', headerName: 'Test Name', width: 120,},
{ field: 'testDate', headerName: 'Test Date', width: 160 },
]
We are using "ag-grid-community": "26.2.0" and "ag-grid-react": "26.2.0" packages in our project. We have implemented a wrapper reusable component which we're planning to use across the application.
The requirement states that checkbox selection and the first column are to be pinned to the left by default.
Column Definitions:
const colDefs = [
{
headerName: "Vulnerability Title",
field: "patchName",
cellRendererFramework: patchListRenderers.patchNameRenderer,
pinned: "left", // pinned property
minWidth: 300,
},
{
headerName: "Status",
field: "vulnerabilityStatus",
minWidth: 180,
},
{
headerName: "Vulnerability ID",
field: "cveId",
minWidth: 210,
},
// more column definitions here
]
My gridOptions are this:
export const gridProps = {
reactUi: true,
rowHeight: 70,
headerHeight: 70,
rowSelection: "multiple",
suppressRowClickSelection: true,
pagination: true,
paginationPageSize: 10,
suppressPaginationPanel: true,
enableCellTextSelection: true,
ensureDomOrder: true,
suppressDragLeaveHidesColumns: true,
suppressColumnVirtualisation: true,
popupParent: document.querySelector("body"),
};
I am facing a weird issue where the pinned column headers are shown, but the data underneath is missing, however, once I drag around the pinned column a bit, everything comes back in its proper place. Please refer to the GIFs attached.
Things I've tried:
Changed the width values,
Tried true and false for suppressColumnVirtualisation property.
Tried to use gridApi.redrawRows() and gridApi.refreshCells() on the onGridReady event.
None of these suggestions worked.
GIF 1
GIF 2
there. I would like to add an image in a material-ui data-grid table. But it's not working. What am I missing here? I tried to search the docs but couldn't see any example that used images.
My code
import { DataGrid } from '#material-ui/data-grid';
const columns = [
{
field: 'image',
headerName: 'Image',
width: 150,
editable: true,
},
{
field: 'name',
headerName: 'Name',
width: 150,
editable: true,
},
];
const rows = [
{
id: 1,
image: "image URL",
type: 'image',
name: 'Cheese Burger',
price: 10_000,
menu: 'Daily Menu',
category: 'Burgers'
},
{
id: 2,
image: "image URL",
name: 'Diet Coke',
price: 10_000,
menu: 'Daily Menu',
category: 'Driks'
},
];
export const ItemsTable = () => {
return (
<div style={{ height: 300, width: '100%' }} className="mt-7">
<DataGrid
rows={rows}
columns={columns}
pageSize={5}
checkboxSelection
disableSelectionOnClick
/>
</div>
);
}
Desired result
What's I'm getting
The renderCell prop allows you to inject components into the DataGrid, creating a column of custom cells.
https://smartdevpreneur.com/add-buttons-links-and-other-custom-cells-in-material-ui-datagrid/#How_to_Add_Other_Custom_Components
Material-Ui's documentation on renderCell.
https://mui.com/components/data-grid/columns/#render-cell
Just need to pass in the value into the image component src.
I made a codesandbox to show renderCell in action.
https://codesandbox.io/s/rendercellgrid-material-demo-edq5p?file=/demo.js
const columns = [
{
field: 'image',
headerName: 'Image',
width: 150,
editable: true,
renderCell: (params) => <img src={params.value} />, // renderCell will render the component
},
{
field: 'name',
headerName: 'Name',
width: 150,
editable: true,
},
];
I am using React-data-grid with Filter options in the table. For some column cells, i am passing a DOM object (not as a string). And for this column, the filter functionality is not working.
this._columns = [
{
key: 'date',
name: 'Shipment date',
width: 220,
sortable: true,
filterable: true,
},{
key: 'price',
name: 'Shipment Price',
width: 220,
sortable: true,
filterable: true,
}];
And here are the Rows...
let rows = [];
_.each(response, function(value, index){
rows.push({
date: value.date
price: <div>{value.currencySymbol} <span>{value.price}</span></div>
})
});
So, this is my Column Metadata , and Rows. I am passing this metadata to ReactDataGrid Component.
Now the date filter is working fine. However this price filter is not working well due to this inline DOM element.
Can Someone please help me to get this solved?
Resolved this by using 'formatter' or else we could use 'getRowMetaData'
formatter: an adaptor/middleware for rendering the value in DOM
getRowMetaData: it is used to get the adjacent cell values of the row. And, We could achieve using props.dependentValues where it will have all the column data of the row. I used this in 'Shipment Price' column, to get the other column values of that row.
this._columns = [
{
key: 'date',
name: 'Shipment date',
width: 220,
sortable: true,
filterable: true,
formatter: (props)=>(<div style={{border: '0px'}}>{props.value}</div>),
},{
key: 'price',
name: 'Shipment Price',
width: 220,
sortable: true,
filterable: true,
formatter: (props) => (this.getTrackingUrl(props.dependentValues.rawObj, props.dependentValues.indexVal)),
getRowMetaData: (row) => (row)
}];