Hi Neha,
Thanks for contacting Syncfusion support.
Query #1: I can see the
default margin/padding applied to columnHeader's divider/cell. Is there a
way i can remove that space from coulmnHeader.
By using the following CSS you can customize the padding and margin of header
cells.
|
[index.css]
/* customize header cell's padding and margin */
.e-grid .e-gridheader tr th:first-child {
padding-left: 0;
}
.e-grid .e-gridheader tr th:last-child {
padding-right: 0;
}
.e-grid .e-headercell,
.e-grid .e-detailheadercell {
padding: 0 0 0;
}
.e-grid .e-headercelldiv {
margin: 0;
padding: 0 0;
}
/* customize the padding of content cells */
.e-grid .e-rowcell {
padding: 0 0;
}
.e-grid .e-rowcell:first-child,
.e-grid .e-summarycell:first-child {
padding-left: 0;
}
.e-grid .e-rowcell:last-child,
.e-grid .e-summarycell:last-child {
padding-right: 0;
}
|
Query #2: Also can i set the columnHeader cell's width to wrap the
content/text inside it.
The auto-wrap allows the cell content of the grid to wrap to the next line when
it exceeds the boundary of the cell width. The Cell Content wrapping works
based on the position of white space between words. To enable auto wrap, set
the allowTextWrap property to true. Kindly
refer to the following documentation for more information.
Text Wrap: https://ej2.syncfusion.com/react/documentation/grid/cell/auto-wrap/
|
[index.js]
function Default() {
const textWrapSettings = { wrapMode: 'Header' };
return (
<GridComponent
dataSource={orderDetails}
gridLines="Both"
allowTextWrap={true}
textWrapSettings={textWrapSettings}
>
</GridComponent>
);
}
|
Sample: https://stackblitz.com/edit/react-cw1twr?file=index.js,index.css
Please get back to us if you need further assistance.
Regards,
Rajapandiyan S
If this post is helpful, please consider Accepting it as the solution so that
other members can locate it more quickly.
