Hi Hyewon,
Greetings from Syncfusion support.
From your query, we understand that you want to define a
fixed width of 100px for the first column and a minimum width of 128px for all
other columns. This can be accomplished by defining the width and min-width CSS
properties for the Grid column from the column groups. Below, you'll find a
code snippet and sample for your reference:
|
[index.css]
/* to set min-width for all columns */
.e-grid .e-content col,
.e-grid .e-headercontent col {
min-width: 128px;
}
/* to set width for first
column */
.e-grid .e-content col:first-child,
.e-grid .e-headercontent col:first-child {
width: 100px;
min-width: 100px;
}
|
Sample: https://stackblitz.com/edit/react-grid-with-columns-width-and-minwidth
In the provided sample, we've specified a minimum width of
128px for all columns and set the 100px width for the first column while also
overriding its minimum width. Background colors have been included for the
columns to visually demonstrate the width distinction between the first column
and the others. Additionally, the sample illustrates the variation in width
when resizing columns, and a horizontal scrollbar will appear as needed if the
columns cannot fit.
Please feel free to reach out if you have any further
questions.
Regards,
Santhosh I
