I am using Material-table (https://material-table.com/#/) for my project. I have implemented the "detail panel" feature (https://material-table.com/#/docs/features/detail-panel) and have enabled search feature as well.
To my knowledge, the "search" function will only search against "string" values in any column in the table.
My detail panel contains text inside of an html pre tag.
detailPanel={rowData => {
return <pre style={preCss}>{rowData.releaseNote}</pre>;
}}
What I want to know is:
Is it possible to also make the "search" function search against data in the "detail panel". If yes, how ?
For anyone having same issue, I believe I found a workaround. I added the "rowData.releaseNote" as a column entry in main table. But then I zeroed out the headerStyle and cellStyle widths and set display:none. So essentially, the data exists as an invisible column in the table.
{
title: "",
field: "releaseNote",
sorting: false,
filtering: false,
headerStyle: { display: "none", width: "0px", maxWidth: "0px" },
cellStyle: { display: "none", width: "0px", maxWidth: "0px" }
}
Wai Ha Lee's solution will cause weird spacing in Columns in my Material-table, I use this one to solve the problem:
{
title: "",
field: "releaseNote",
sorting: false,
filtering: false,
hidden: true,
searchable: true,
width: "0px"
}
Adding:
{
hidden: true,
}
should work.
Related
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'
})
}}
I'm trying to get the data of Checked row when it's clicked in DataGrid component.
When I tried to make this , I was able to get this with onRowSelected attribute of DataGrid.
But now I cannot reach this attribute. I don't now is that deprecated or else. Now, with onSelectionModelChange attribute, I can only get the ıd value of that row. But what I need is get the object of that row with fields of it. I can get what ı want with onRowClick attribute, but I have to get it with checkbox selection and ı have to make this with DataGrid component.
Here is my datagrid now
<DataGrid
rows={this.props.rows}
columns={this.props.columns}
pageSize={5}
checkboxSelection
disableSelectionOnClick
onRowSelected={(selection) => {
//Cannot reach any selection data. Need another attrib. attribute.
console.log(selection);
}}
/>
My columns:
columnsPlants: [
{ field: 'plantId', headerName: 'ID', width: 120 },
{ field: 'name', headerName: 'Plant Name', width: 230 },
{ field: 'eic', headerName: 'EIC', width: 170 },
{ field: 'organizationETSOCode', width: 200, headerName: 'Organization ETSO' },
{
field: 'addPortfolio',
headerName: 'Add to Portfolio',
width: 200,
editable: false,
sortable: false,
disableClickEventBubbling: true,
renderCell: (params) => {
return (
<div
className="d-flex justify-content-between align-items-center"
style={{ cursor: 'pointer', marginLeft: '25px' }}
>
{this.AddtoPortfolio(params.row.plantId)}
</div>
);
},
},
],
And the data format I want to get when checkbox selected:
You can only access the row ids inside onSelectionModelChange callback. If you want to get the whole row objects, use the original rows data and filter the others based on the selected ids.
Note: DataGrid stores each row ID in string internally so if the ID from your original row data is number you may want to convert it toString() before comparing.
rows={rows}
onSelectionModelChange={(ids) => {
const selectedIDs = new Set(ids);
const selectedRowData = rows.filter((row) =>
selectedIDs.has(row.id.toString());
);
console.log(selectedRowData);
}}
Live Demo
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
I want to know how to make material-table column resize in react.
Please help me.
I've tried the following code
options={{
sorting:false,
resizable:true,
this feature is included under the paid DATAGRID-PRO
Material UI now is not supported but you can put a div on the right edge of the header of each cell to resize its column.
Here is my solution Resize columns table Material-ui
There is no resize path in material-ui table. you can use material-ui Data grid -(Demo Link): https://material-ui.com/components/data-grid/demo/#data-grid-demo.
Or
You can rewrite the existing material-ui table style like :
.MuiTableHead-root .MuiTableRow-root .MuiTableCell-head {
font-weight: bold;
resize: horizontal;
overflow-x: overlay;
overflow-y: hidden;
border-right: 1px solid;
}
Material UI Data grid column resize is not working.
[
{ field: 'id', header: 'id'},
{ field: 'count', header: 'Count', type: 'number'},
{ field: 'total', header: 'Total', type: 'number'}
];
resize should be true by default
I have found specifying the cell style assists in manipulation of your column sizes
{
field: 'Resizing',
title: 'Column Width',
cellStyle: {
whiteSpace: 'nowrap',
width: '20%',
},
},
Everything in Material-Table is working good, but I cant find the props / option to disable Drag and Drop for columns headings. I just need it to stay the same as it is provided in code
This is how my columns and options props look like :
columns={[
{title: 'Name', field: 'name', defaultSort: 'asc'},
{title: 'Code', field: 'code'},
{title: 'Type', field: 'type.value'},
{title: 'Regions', field: 'regions', sorting: false},
{title: 'Currency', field: 'currencyCode'},
]},
options={{
showTitle: false,
actionsColumnIndex: -1
}}
You should set draggable option to false
options={{
draggable: false,
}}
As a result you wont also be able to use grouping option anymore
Had the same issue, but setting grouping: false didn't solve my problem.
Instead I set pointerEvents: "none" in the headerStyle for each column. That way the headers won't be interactable/ draggable. Worked like a charm.
As written in the docs, you can add grouping false in the options object.