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 },
]}
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 built a grid using ag-grid,
for one of the column I sent custom cell editor to render my own date component,
this column have also valueGetter to format the value to display,
my problem is: the cell editor get the formmated value, that returned from valueGetter, I want to have there the source value, how can I do it?
here is the definition of my columns object:
const columnsObject = [
{
field: 'date',
colId: 'date',
headerName: 'date',
filter: true,
sortable: true,
unSortIcon: true,
resizable: true,
valueGetter: row => row.data.date && moment(row.data.date).format('YYYY-MM-DDTHH:mm'),
editable: true,
cellEditor: 'dateEditor',
cellEditorParams: {
name: 'startDate',
}
},
{
field: 'text',
colId: 'text',
headerName: 'text',
filter: true,
resizable: true,
editable: true,
},
];
My dateEditor should get the value with time (YYYY-MM-DDTHH:mm format), but in the view after stop editing it should be only time (YYYY-MM-DD format).
using valueFormatter instead of valueGetter solved my problem
I am trying to add a textfield (or combobox) into the column header of dynamic grid.
There are suggestions for using "items" property to resolve this problem like in example below (line 81 in live example ):
...
text: 'Email',
flex: 1,
menuDisabled: true,
sortable: false,
dataIndex: 'email',
items: [{
xtype: 'textfield',
labelWidth: 40,
flex: 1,
fieldLabel: 'Email'
}]
...
And it basically works but, there are several issues with layout which I cannot resolve myself:
textfield control appears under the column title (expect horizontal items alignment);
height of column header is to big (must be normal);
Here is a picture what I want to get.
Also, there is a live example in the fiddle with mentioned issues.
Are there any ideas how to fix this?
You were just about there, here are the code changes I made.
function getColumnConfigs() {
return [{
text: 'Name',
dataIndex: 'name',
flex: 1
}, {
text: '',
flex: 1,
menuDisabled: true,
sortable: false,
dataIndex: 'email',
items: [{
xtype: 'combobox',
store: ages,
valueField: 'age',
displayField: 'age',
labelWidth: 40,
padding: '0 0 0 10',
flex: 1,
fieldLabel: 'Age'
}]
}]
The code removes your text attribute so it doesn't show the column header. Padding was added to the combobox to move the label right. I added the combobox rather than a textfield.
And a fiddle.
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 use ag-grid with Angular 1.5 and I have defined 5 columns in the following format in an array:
[
{headerName: 'Username', width: 150, field: 'username'},
{headerName: 'Full Name', width: 150, field: 'full_name'},
{headerName: 'Location', width: 150, field: 'location'},
{headerName: 'Email', width: 150, field: 'email'},
{headerName: 'Check In Comment', width: 370, field: 'comment'},
];
The rendering shows 6 columns with the right-most one being blank. I've tried everything, but I cannot still remove the blank column. See the :
gridOptions:
options = {
rowData: dataArray,
rowModelType: 'pagination',
columnDefs: getColumnDefs(),
enableColResize: true,
enableSorting: false,
enableFilter: true,
rowHeight: 25,
angularCompileRows: true,
suppressRowClickSelection: true
};
The html code:
<div style="width: 100%;"
ag-grid="vm.gridOptions"
class="ag-fresh ag-basic">
</div>
I wonder how to remove the blank column right to the 'Check In Comment' column. any ideas?
Have you tried gridOptions.api.sizeColumnsToFit() ?
Source (7min 50sec)
extra column is there even if we use that api gridOptions.api.sizeColumnsToFit().