const gridOptions = computed(() => ({
sortable: false,
editingEvent: 'dblclick',
rowHeaders: [
{ type: 'checkbox', width: 50, align: 'center' },
{ type: 'rowNum', header: 'No.', width: 80, align: 'center' }
],
columnOptions: { resizable: true },
columns: [
{
header: '임시값',
name: 'objective',
minWidth: 590,
sortable: false,
renderer: {
type: Renderer,
},
editor: {
type: Editor,
},
},
],
}));
In this way, a fixed width value is applied to the rowheader and only min-width is applied to the value entering the column, so that it is responsive to the screen size.
However, in this state, the header part of the fixed value to the rowheader is given a decimal point width such as 50.22 80.42 and the field is given a normal value of 50, 80. I'm not sure if this is the problem, but the 'temporary value' takes up all the remaining areas with the automatic width auto setting, but earlier, there is a problem that the width of the rowheader is added to activate the bottom horizontal scroll. Is there a way to solve it by normalizing the width value except for the scrollX:false setting?
The scroll disappears when the width generated by width: auto is reduced by just 1px, but the default width: auto calculated value seems to result over 100% due to the width of decimal point in rowHeaders. I was wondering if there is a way to fix this.
이런식으로 rowHeader에 들어가는 값은 고정 width 값이 적용되고 column으로 들어가는 값에는 min-width만 적용하여 화면 사이즈에 반응형으로 적용되도록 만들고있습니다.
다만 이 상태에서 rowHeader에 고정적으로 부여한 값의 헤더부분이 50.22 80.42 등 소수점 width가 부여되고 필드에는 정상적인 50 , 80 과 같은 값이 부여되고 있습니다. 이 점이 문제인지는 정확히 모르겠으나 남은 영역을 '임시값'이 자동 width auto 설정으로 남은 영역을 모두 차지하고 있습니다만 앞서 rowHeader의 소수점 width 부분이 추가되어 하단 가로 스크롤이 활성화되는 문제가 있습니다. scrollX:false 설정을 제외하고 width값을 정상화하여 해결할 수 있는 방법이 있을까요?
const gridOptions = computed(() => ({
sortable: false,
editingEvent: 'dblclick',
rowHeaders: [
{ type: 'checkbox', width: 50, align: 'center' },
{ type: 'rowNum', header: 'No.', width: 80, align: 'center' }
],
columnOptions: { resizable: true },
columns: [
{
header: '임시값',
name: 'objective',
minWidth: 590,
sortable: false,
renderer: {
type: Renderer,
},
editor: {
type: Editor,
},
},
],
}));
In this way, a fixed width value is applied to the rowheader and only min-width is applied to the value entering the column, so that it is responsive to the screen size.
However, in this state, the header part of the fixed value to the rowheader is given a decimal point width such as 50.22 80.42 and the field is given a normal value of 50, 80. I'm not sure if this is the problem, but the 'temporary value' takes up all the remaining areas with the automatic width auto setting, but earlier, there is a problem that the width of the rowheader is added to activate the bottom horizontal scroll. Is there a way to solve it by normalizing the width value except for the scrollX:false setting?
The scroll disappears when the width generated by width: auto is reduced by just 1px, but the default width: auto calculated value seems to result over 100% due to the width of decimal point in rowHeaders. I was wondering if there is a way to fix this.
이런식으로 rowHeader에 들어가는 값은 고정 width 값이 적용되고 column으로 들어가는 값에는 min-width만 적용하여 화면 사이즈에 반응형으로 적용되도록 만들고있습니다.
다만 이 상태에서 rowHeader에 고정적으로 부여한 값의 헤더부분이 50.22 80.42 등 소수점 width가 부여되고 필드에는 정상적인 50 , 80 과 같은 값이 부여되고 있습니다. 이 점이 문제인지는 정확히 모르겠으나 남은 영역을 '임시값'이 자동 width auto 설정으로 남은 영역을 모두 차지하고 있습니다만 앞서 rowHeader의 소수점 width 부분이 추가되어 하단 가로 스크롤이 활성화되는 문제가 있습니다. scrollX:false 설정을 제외하고 width값을 정상화하여 해결할 수 있는 방법이 있을까요?