diff --git a/packages/toast-ui.grid/cypress/integration/dimension.spec.ts b/packages/toast-ui.grid/cypress/integration/dimension.spec.ts index 49db288c8..b7ac2cb97 100644 --- a/packages/toast-ui.grid/cypress/integration/dimension.spec.ts +++ b/packages/toast-ui.grid/cypress/integration/dimension.spec.ts @@ -76,6 +76,7 @@ interface HeightInfo { interface RowHeightInfo { rowHeight?: number; + minRowHeight?: number; data?: OptRow[]; } @@ -409,6 +410,19 @@ describe('row height', () => { }); }); + it('rowHeight: 15', () => { + // The default value of minRowHeight is 40. + // If the value of rowHeight is less than minRowHeight, the actual row height is set as minRowHeight. + // Therefore, the minRowHeight value also needs to be set. + createGridWithRowHeight({ rowHeight: 15, minRowHeight: 15 }); + + cy.getRsideBody() + .find('tr') + .each(($el) => { + expect($el.height()).to.eql(15); + }); + }); + it('rowHeight: custom', () => { const data = [{ c1: 'test1', _attributes: { height: 70 } }, { c2: 'test2' }]; createGridWithRowHeight({ data }); diff --git a/packages/toast-ui.grid/docs/en/setting-width-height.md b/packages/toast-ui.grid/docs/en/setting-width-height.md index 0a49281cc..0e0a26ed1 100644 --- a/packages/toast-ui.grid/docs/en/setting-width-height.md +++ b/packages/toast-ui.grid/docs/en/setting-width-height.md @@ -206,7 +206,7 @@ const grid = new Grid({ ![08-height-rowHeight-number](https://user-images.githubusercontent.com/18183560/61211937-cd40dd00-a73b-11e9-8a6d-87ac170bc270.png) -When trying to fix the `rowHeight` to a value that is smaller than the default row height value, we can do so by using the `minRowHeight` option. +When trying to fix the `rowHeight` to a value that is smaller than the default row height value, we can do so by using the `minRowHeight` option. However, the minimum value of `rowHeight` is `9`. ```js const grid = new Grid({ diff --git a/packages/toast-ui.grid/docs/ko/setting-width-height.md b/packages/toast-ui.grid/docs/ko/setting-width-height.md index 5a7007343..cdf09e647 100644 --- a/packages/toast-ui.grid/docs/ko/setting-width-height.md +++ b/packages/toast-ui.grid/docs/ko/setting-width-height.md @@ -260,7 +260,7 @@ const grid = new Grid({ ![08-height-rowHeight-number](https://user-images.githubusercontent.com/18183560/61211937-cd40dd00-a73b-11e9-8a6d-87ac170bc270.png) -`rowHeight`의 높이를 고정하면서 기본 행 높이보다 작은 값으로 설정하려는 경우에는 다음과 같이 `minRowHeight` 옵션을 사용하면 된다. +`rowHeight`의 높이를 고정하면서 기본 행 높이보다 작은 값으로 설정하려는 경우에는 다음과 같이 `minRowHeight` 옵션을 사용하면 된다. 단, `rowHeight`의 최소값은 `9`이다. ```js const grid = new Grid({ diff --git a/packages/toast-ui.grid/src/grid.tsx b/packages/toast-ui.grid/src/grid.tsx index dcf23c953..d345a336f 100644 --- a/packages/toast-ui.grid/src/grid.tsx +++ b/packages/toast-ui.grid/src/grid.tsx @@ -119,9 +119,8 @@ if ((module as any).hot) { * @param {boolean} [options.header.complexColumns.resizable=false] - If set to true, resize-handles of each complex columns will be shown. * @param {string|number} [options.width='auto'] - Options for grid width. * @param {string|number} [options.rowHeight=40] - The height of each rows. - * the height of each rows expands to dom's height. If set to number, the height is fixed. - * @param {number} [options.minRowHeight=40] - The minimum height of each rows. When this value is larger than - * the row's height, it set to the row's height. + * The height of each rows expands to dom's height. If set to number, the height is fixed and the minimum is 9. + * @param {number} [options.minRowHeight=40] - The minimum height of each rows. * @param {string|number} [options.bodyHeight] - The height of body area. The default value is 'auto', * the height of body area expands to total height of rows. If set to 'fitToParent', the height of the grid * will expand to fit the height of parent element. If set to number, the height is fixed. diff --git a/packages/toast-ui.grid/src/helper/constant.ts b/packages/toast-ui.grid/src/helper/constant.ts index 18ccc4cee..966679814 100644 --- a/packages/toast-ui.grid/src/helper/constant.ts +++ b/packages/toast-ui.grid/src/helper/constant.ts @@ -9,3 +9,4 @@ export const DISABLED_PRIORITY_ROW = 'ROW'; export const DISABLED_PRIORITY_COLUMN = 'COLUMN'; export const HORIZONTAL_PADDING_OF_CELL = 10; export const DEFAULT_SUB_CONTEXT_MENU_TOP = -6; +export const OCCUPIED_HEIGHT_BY_CELL_LAYOUY = 9; diff --git a/packages/toast-ui.grid/src/view/bodyRow.tsx b/packages/toast-ui.grid/src/view/bodyRow.tsx index 3c3478439..96fd0438c 100644 --- a/packages/toast-ui.grid/src/view/bodyRow.tsx +++ b/packages/toast-ui.grid/src/view/bodyRow.tsx @@ -6,6 +6,7 @@ import { cls } from '../helper/dom'; import { DispatchProps } from '../dispatch/create'; import { debounce, isNull } from '../helper/common'; import { RowSpanCell } from './rowSpanCell'; +import { OCCUPIED_HEIGHT_BY_CELL_LAYOUY } from '../helper/constant'; interface OwnProps { rowIndex: number; @@ -57,7 +58,13 @@ class BodyRowComp extends Component { return ( rowHeight > 0 && ( = 40 + ? '' + : `${rowHeight - OCCUPIED_HEIGHT_BY_CELL_LAYOUY}px`, + }} class={cls( [isOddRow, 'row-odd'], [!isOddRow, 'row-even'],