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%',
},
},
Related
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.
Is it possible to put label at bottom of text field?
I'm required to have the UI look like a PDF/printed form where most of the field labels are centered below input fields.
A CSS style/class approach is good enough. I just want to get this over in a hurry.
Thanks in advance.
Add a custom cls to your textfield as follows:
Ext.create('Ext.Panel',{
renderTo: Ext.getBody(),
width: 300,
height: 500,
items: [{
xtype: 'textfield',
fieldLabel: 'First Name',
cls: 'pdfField',
labelSeparator: ''
}]
});
Then create the pdfField class:
For ExtJS (5) =>
div.pdfField .x-form-item-label {
display: table-footer-group;
text-align: center;
}
For ExtJS (4) =>
.pdfField td {
display: table-caption;
}
.pdfField tr>td:first-child {
display: table-footer-group;
text-align: center;
}
Here is a fiddle ta works with both versions: https://fiddle.sencha.com/#fiddle/h35
Not that it looks better with ExtJS 5, that is because in ExtJS 5 uses divs to display the textfield content while ExtJS 4 uses table cells.
Can I make a label somehow behave as a form field? I added a name field and it does not work.
{
xtype: 'label',
name: 'id'
}
However this works :
{
xtype: 'textfield',
name: 'id'
}
Should I just use a textfield and strip away its border?
UPDATE :
I am using a displayfield, and that seems to work. But, apart from changing the background colour, I cannot change any other properties of this using style.
{
flex: 1,
xtype: 'displayfield',
text: 'rollout',
style: 'font-size: 26px; background-color: #B6DAFF; ', //font size does not work :( Only background color does.
padding: '0',
margin: 0,
name: 'status',
width: 100
}
I am able to populate label in form panel. Please try below code
var form = new Ext.form.FormPanel({
items: [{
xtype:'label',
text: 'Send To:',
style: 'font-size: 26px; background-color: #B6DAFF; ',
}]
});
I have a label and I'm setting the text color like this, but the label text does not change color:
xtype: 'label',
text: 'My Text',
cls: 'myTextClass'
Here is the CSS:
.myTextClass {
color: #ff0000;
}
If I do this on the label it works:
style: {
color: '#ff0000'
}
Look at the label in Google dev tool. Probably your css gets overridden because there is a more specific rule. You have to add something to your css selector like
.x-label .myTextClass {
color: #ff0000;
}
Hello I got problem with scroll on my grid.
Here is the code (nothing fancy or special in it)
Ext.define('grid.list',{
alias:'widget.grid.list',
extend: 'Ext.grid.Panel',
title: 'list',
frame:true,
width:325,
store: new axs.dry.cargo.data.store.list,
queryMode: 'remote',
style:{
cursor: 'default'
},
viewConfig: {
autoScroll: true
},
features:[Ext.create('Ext.grid.feature.Grouping',{
groupHeaderTpl: '{name}'
})],
columns: [
{
text: 'Name',
flex: true,
dataIndex: 'name',
sortable: false
}
],
initComponent:function(){
this.on('beforerender',function(){
this.store.load();
});
grid.list.superclass.initComponent.apply(this,arguments)
}
})
Grid is looking good and the scroller is showing BUT over the scrollbar extjs generates a DIV who is making the real problem. Because of that div I CAN'T click on the scrollbar because the transparent DIV is over it.... here is the code of this useless DIV
<div id="gridscroller-1032" class="x-component x-scroller x-scroller-vertical x-component-default x-docked x-docked-right x-component-docked-right x-component-default-docked-right" style="width: 17px; height: 297px; left: 302px; top: 47px; " role="presentation"><div class="x-stretcher" id="ext-gen1392" style="width: 1px; height: 2953px; "></div></div>
I hear opinion that this div is generated for "infinitive grid" but ...
Can you help me with good solusion (removing the element by selecting its ID is not a good solusion)
PS. When I remove the fixet width of my grid.list element the problem gone ... but then it starts showing horisontal scroll bar who looks ugly and I can remove it only by setting the width to fixed size.
PS2. I'm using the default css files and no special styles or anything.
The problem fixed by itself. I have integrate my form in the main project and the scrollbar appears...
I don't know why is that happening, maybe it is extjs bug.