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.
Related
I am new to react and i am using material table for my application...i need to have my header column center aligned and when i tried to apply the align:'center'.....in the columns the data is getting center aligned but not the header...when i tried to inspect i found that the div inside the mui table header has display:flex and when i removed it the header text is getting center aligned....how i can override that div style in react
<MaterialTable
className="-striped -highlight"
title="Expenses"
columns={[
{title: 'Emp Code', field: 'empCode', sortable: false,wrap:
true,align:'center'},
{title: 'Emp Name', field: 'empName', sortable: true, wrap: true,align:'center'}
{title: 'Expenses No', field: 'expensesNo', sortable: true, wrap:
true,align:'center'},
{title: 'Approved Amount', field: 'approvalAmount', sortable: true, wrap: true
customSort:(a,b)=> (a.approvalAmount)-(b.approvalAmount)}
{title: 'Message', field: 'message', sortable: true, wrap: true },
]}
I am using React Ag-grid version 25.3.0. I need to autoSizeAllColumns everytime the grid data is updated. I have tried onRowDataChanged. But, this is fired before the custom cellRenderers complete the rendering. So, I am looking for an Grid Event or callback where I get notified once all the rendering is complete. Below is the sample snippet,
<AgGridReact
frameworkComponents={{
renderer: CustomRenderer,
}}
columnDefs={columns}
rowData={rowData}
OnRowDataChanged={(event) => event.columnApi.autoSizeAllColumns()} //this doesn't wait for frameworkComponents
/>
The autoSizeAllColumns would work if I add a delay to it by doing something like this.
OnRowDataChanged={(event) => setTimeout(() => event.columnApi.autoSizeAllColumns(), 300}
But this doesn't look clean and looks somewhat ugly in the UI as the updates and autoSize happen with a delay. What's the best way to handle such scenarios.
I have resizable: true in the columnDef. The autoSizeAllColumns() works just fine for plain columns. But only doesn't work for columns with cellRenderer
const columnDefs = [
{ field: 'name', resizable: true, cellRenderer: 'renderer' },
{ field: 'age', resizable: true },
{ field: 'address', resizable: true },
];
In the above sample, autoSizeAllColumns() with onRowDataChanged event would work fine for columns 'age' and 'address', but not for 'name'.
Help please :-)
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)
}];
I am using ui-grid in one of my projects and one of the requirement is to hide/show columns in the grid. Hiding columns working well but then how can I re-show the hidden column?
After searching awhile I found that in ng-grid there is showColumnMenu which provide the ability to show column after hiding it, see this example I found
$scope.gridOptions = {
data: 'myData',
columnDefs: [{
field: "id",
visible: false
},{
field: "name",
displayName : "name"
},{
field: "age",
displayname: "age",
}] ,
multiSelect: false,
showGroupPanel: true,
selectedItems: [],
showColumnMenu: true };
, but in ui-grid using showColumnMenu is not working.
I was wondering if someone know how to show hidden columns.
Thanks,
ng-grid is being re written as ui-grid. Your example link is pointing to ng-grid. But if you are wondering how to do this in angular-ui-grid.
http://plnkr.co/edit/In28bF2EYuQaATwqnBAn?p=preview Take a look at this example. To show the hidden the columns, you need to enableGridMenu, which will show you the option to show the hidden columns.
$scope.gridOptions = {
exporterMenuCsv: false,
enableGridMenu: true,
columnDefs: [
{ name: 'name' },
{ name: 'gender', enableHiding: false },
{ name: 'company' }
],
...
};
In extJs I need to disable one field until edit button is clicked.
xtype:'textfield',
fieldLabel: 'Address',
name:'streetAddress',
labelWidth: 48,
maxLength: 100,
cls: 'appAddresscls',
id: 'resume-applicantdetails-view-address',
allowBlank : false,
//readOnly:true,
skipValue:true
When loading I called
Ext.getCmp('resume-applicantdetails-view-address').getEl().dom.setAttribute('readOnly', true);
When editing
Ext.getCmp('resume-applicantdetails-view-address').getEl().dom.removeAttribute('readOnly');
But the field is always in edit mode. Actually I try this because, the disabled fields in IE appears in gray color.
xtype:'textfield',
fieldLabel: 'Address',
name:'streetAddress',
labelWidth: 48,
maxLength: 100,
cls: 'appAddresscls',
id: 'resume-applicantdetails-view-address',
allowBlank : false,
readOnly:false,
skipValue:true
When loading I called
Ext.getCmp('resume-applicantdetails-view-address').setReadOnly(true);
When editing
Ext.getCmp('resume-applicantdetails-view-address').setReadOnly(false);
You can keep disabled:true and add the following css in your page to make such fields appear normal as others:
.x-item-disabled .x-form-item-label,
.x-item-disabled .x-form-cb-label {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
opacity: 0.9;
}
Hope this helps.
Set the field to be disabled: true in config then in the edit button call function to renable.
Ext.getCmp('resume-applicantdetails-view-address').setDisabled(false);
To set disable:
Ext.get('resume-applicantdetails-view-address').set({disabled:'disabled'});
To remove disable:
Ext.get('resume-applicantdetails-view-address').set({disabled:''});
It helps to change the readOnly property on run time:
component.el.dom.readOnly = true;