diff --git a/packages/cheetah-grid/src/js/GridCanvasHelper.ts b/packages/cheetah-grid/src/js/GridCanvasHelper.ts index 417e7e4f..0437cc46 100644 --- a/packages/cheetah-grid/src/js/GridCanvasHelper.ts +++ b/packages/cheetah-grid/src/js/GridCanvasHelper.ts @@ -870,6 +870,7 @@ function drawRadioButton( } ); } + class ThemeResolver implements RequiredThemeDefine { private _grid: ListGridAPI; private _checkbox: RequiredThemeDefine["checkbox"] | null = null; @@ -1118,6 +1119,30 @@ function strokeRect( } } +function getPaddedRect( + rect: RectProps, + padding: number | string | (number | string)[] | undefined, + font: string | undefined, + // eslint-disable-next-line @typescript-eslint/no-explicit-any + helper: GridCanvasHelper, + context: CellContext +) { + if (!padding) { + return rect; + } + const { + 0: pTop, + 1: pRight, + 2: pBottom, + 3: pLeft, + } = helper.toBoxPixelArray(padding, context, font); + const left = rect.left + pLeft; + const top = rect.top + pTop; + const width = rect.width - pRight - pLeft; + const height = rect.height - pTop - pBottom; + return new Rect(left, top, width, height); +} + export class GridCanvasHelper implements GridCanvasHelperAPI { private _grid: ListGridAPI; private _theme: RequiredThemeDefine; @@ -1291,8 +1316,6 @@ export class GridCanvasHelper implements GridCanvasHelperAPI { trailingIcon?: SimpleColumnIconOption; } = {} ): void { - let rect = context.getRect(); - const { col, row } = context; if (!color) { @@ -1306,14 +1329,13 @@ export class GridCanvasHelper implements GridCanvasHelperAPI { this.drawWithClip(context, (ctx) => { font = getFont(font, context.col, context.row, this._grid, ctx); - if (padding) { - const paddingNums = this.toBoxPixelArray(padding, context, font); - const left = rect.left + paddingNums[3]; - const top = rect.top + paddingNums[0]; - const width = rect.width - paddingNums[1] - paddingNums[3]; - const height = rect.height - paddingNums[0] - paddingNums[2]; - rect = new Rect(left, top, width, height); - } + const rect = getPaddedRect( + context.getRect(), + padding, + font, + this, + context + ); _inlineRect(this._grid, ctx, text, rect, col, row, { offset, color, @@ -1357,8 +1379,6 @@ export class GridCanvasHelper implements GridCanvasHelperAPI { trailingIcon?: SimpleColumnIconOption; } = {} ): void { - let rect = context.getRect(); - const { col, row } = context; if (!color) { @@ -1372,14 +1392,13 @@ export class GridCanvasHelper implements GridCanvasHelperAPI { this.drawWithClip(context, (ctx) => { font = getFont(font, context.col, context.row, this._grid, ctx); - if (padding) { - const paddingNums = this.toBoxPixelArray(padding, context, font); - const left = rect.left + paddingNums[3]; - const top = rect.top + paddingNums[0]; - const width = rect.width - paddingNums[1] - paddingNums[3]; - const height = rect.height - paddingNums[0] - paddingNums[2]; - rect = new Rect(left, top, width, height); - } + const rect = getPaddedRect( + context.getRect(), + padding, + font, + this, + context + ); const calculator = this.createCalculator(context, font); lineHeight = calculator.calcHeight(lineHeight); _multiInlineRect(this._grid, ctx, lines, rect, col, row, { @@ -1672,6 +1691,7 @@ export class GridCanvasHelper implements GridCanvasHelperAPI { check: boolean, context: CellContext, { + padding, animElapsedTime, offset = CHECKBOX_OFFSET, uncheckBgColor, @@ -1685,7 +1705,13 @@ export class GridCanvasHelper implements GridCanvasHelperAPI { const { col, row } = context; drawCheckbox( ctx, - context.getRect(), + getPaddedRect( + context.getRect(), + padding, + undefined /* font */, + this, + context + ), col, row, check, @@ -1706,6 +1732,7 @@ export class GridCanvasHelper implements GridCanvasHelperAPI { check: boolean, context: CellContext, { + padding, animElapsedTime, offset = CHECKBOX_OFFSET, checkColor, @@ -1721,7 +1748,13 @@ export class GridCanvasHelper implements GridCanvasHelperAPI { const { col, row } = context; drawRadioButton( ctx, - context.getRect(), + getPaddedRect( + context.getRect(), + padding, + undefined /* font */, + this, + context + ), col, row, check, @@ -1761,15 +1794,13 @@ export class GridCanvasHelper implements GridCanvasHelperAPI { this.drawWithClip(context, (ctx) => { font = getFont(font, context.col, context.row, this._grid, ctx); const { col, row } = context; - const paddingNums = this.toBoxPixelArray( + const { left, top, width, height } = getPaddedRect( + rect, padding || rect.height / 8, - context, - font + font, + this, + context ); - const left = rect.left + paddingNums[3]; - const top = rect.top + paddingNums[0]; - const width = rect.width - paddingNums[1] - paddingNums[3]; - const height = rect.height - paddingNums[0] - paddingNums[2]; bgColor = getStyleProperty( bgColor, diff --git a/packages/cheetah-grid/src/js/columns/style/StdBaseStyle.ts b/packages/cheetah-grid/src/js/columns/style/StdBaseStyle.ts index 0f5cb108..8201234e 100644 --- a/packages/cheetah-grid/src/js/columns/style/StdBaseStyle.ts +++ b/packages/cheetah-grid/src/js/columns/style/StdBaseStyle.ts @@ -5,6 +5,7 @@ let defaultStyle: StdBaseStyle; export class StdBaseStyle extends BaseStyle { private _textAlign: CanvasTextAlign; private _textBaseline: CanvasTextBaseline; + private _padding: number | string | (number | string)[] | undefined; static get DEFAULT(): StdBaseStyle { return defaultStyle ? defaultStyle : (defaultStyle = new StdBaseStyle()); } @@ -12,6 +13,7 @@ export class StdBaseStyle extends BaseStyle { super(style); this._textAlign = style.textAlign || "left"; this._textBaseline = style.textBaseline || "middle"; + this._padding = style.padding; } get textAlign(): CanvasTextAlign { return this._textAlign; @@ -27,6 +29,13 @@ export class StdBaseStyle extends BaseStyle { this._textBaseline = textBaseline; this.doChangeStyle(); } + get padding(): number | string | (number | string)[] | undefined { + return this._padding; + } + set padding(padding: number | string | (number | string)[] | undefined) { + this._padding = padding; + this.doChangeStyle(); + } clone(): StdBaseStyle { return new StdBaseStyle(this); } diff --git a/packages/cheetah-grid/src/js/columns/style/Style.ts b/packages/cheetah-grid/src/js/columns/style/Style.ts index 0037f479..90a0a4c7 100644 --- a/packages/cheetah-grid/src/js/columns/style/Style.ts +++ b/packages/cheetah-grid/src/js/columns/style/Style.ts @@ -4,7 +4,6 @@ let defaultStyle: Style; export class Style extends StdBaseStyle { private _color?: ColorDef; private _font?: string; - private _padding: number | string | (number | string)[] | undefined; private _textOverflow: TextOverflow; static get DEFAULT(): Style { return defaultStyle ? defaultStyle : (defaultStyle = new Style()); @@ -13,7 +12,6 @@ export class Style extends StdBaseStyle { super(style); this._color = style.color; this._font = style.font; - this._padding = style.padding; this._textOverflow = style.textOverflow || "clip"; } get color(): ColorDef | undefined { @@ -30,13 +28,6 @@ export class Style extends StdBaseStyle { this._font = font; this.doChangeStyle(); } - get padding(): number | string | (number | string)[] | undefined { - return this._padding; - } - set padding(padding: number | string | (number | string)[] | undefined) { - this._padding = padding; - this.doChangeStyle(); - } get textOverflow(): TextOverflow { return this._textOverflow; } diff --git a/packages/cheetah-grid/src/js/columns/type/BaseColumn.ts b/packages/cheetah-grid/src/js/columns/type/BaseColumn.ts index 31ed7343..f2bf19f1 100644 --- a/packages/cheetah-grid/src/js/columns/type/BaseColumn.ts +++ b/packages/cheetah-grid/src/js/columns/type/BaseColumn.ts @@ -325,7 +325,7 @@ export abstract class BaseColumn implements ColumnTypeAPI { indicatorBottomRight, indicatorBottomLeft, } = style; - for (const [indicatorStyle, kind] of [ + for (const { 0: indicatorStyle, 1: kind } of [ [indicatorTopLeft, DrawIndicatorKind.topLeft], [indicatorTopRight, DrawIndicatorKind.topRight], [indicatorBottomRight, DrawIndicatorKind.bottomRight], diff --git a/packages/cheetah-grid/src/js/columns/type/CheckColumn.ts b/packages/cheetah-grid/src/js/columns/type/CheckColumn.ts index dd87a1bb..4c9bfd27 100644 --- a/packages/cheetah-grid/src/js/columns/type/CheckColumn.ts +++ b/packages/cheetah-grid/src/js/columns/type/CheckColumn.ts @@ -28,6 +28,7 @@ export class CheckColumn extends BaseColumn { const { textAlign, textBaseline, + padding, borderColor, checkBgColor, uncheckBgColor, @@ -54,6 +55,7 @@ export class CheckColumn extends BaseColumn { borderColor, checkBgColor, uncheckBgColor, + padding, }; if (elapsed != null) { opt.animElapsedTime = elapsed; diff --git a/packages/cheetah-grid/src/js/columns/type/ImageColumn.ts b/packages/cheetah-grid/src/js/columns/type/ImageColumn.ts index c89fc372..643de709 100644 --- a/packages/cheetah-grid/src/js/columns/type/ImageColumn.ts +++ b/packages/cheetah-grid/src/js/columns/type/ImageColumn.ts @@ -7,6 +7,7 @@ import type { import { BaseColumn } from "./BaseColumn"; import type { DrawCellInfo } from "../../ts-types-internal"; import { ImageStyle } from "../style/ImageStyle"; +import { Rect } from "../../internal/Rect"; import { calcStartPosition } from "../../internal/canvases"; import { getCacheOrLoad } from "../../internal/imgs"; @@ -63,7 +64,8 @@ export class ImageColumn extends BaseColumn { _grid: ListGridAPI, { drawCellBase }: DrawCellInfo ): void { - const { textAlign, textBaseline, margin, bgColor, visibility } = style; + const { textAlign, textBaseline, padding, margin, bgColor, visibility } = + style; if (bgColor) { drawCellBase({ bgColor, @@ -76,7 +78,19 @@ export class ImageColumn extends BaseColumn { helper.drawWithClip(context, (ctx) => { ctx.textAlign = textAlign; ctx.textBaseline = textBaseline; - const rect = context.getRect(); + let rect = context.getRect(); + if (padding) { + const paddingNums = helper.toBoxPixelArray( + padding, + context, + undefined /* font */ + ); + const left = rect.left + paddingNums[3]; + const top = rect.top + paddingNums[0]; + const width = rect.width - paddingNums[1] - paddingNums[3]; + const height = rect.height - paddingNums[0] - paddingNums[2]; + rect = new Rect(left, top, width, height); + } if (style.imageSizing === "keep-aspect-ratio") { const { width, height } = calcKeepAspectRatioSize( value.width, diff --git a/packages/cheetah-grid/src/js/columns/type/RadioColumn.ts b/packages/cheetah-grid/src/js/columns/type/RadioColumn.ts index 0275e4a5..d4d55eae 100644 --- a/packages/cheetah-grid/src/js/columns/type/RadioColumn.ts +++ b/packages/cheetah-grid/src/js/columns/type/RadioColumn.ts @@ -28,6 +28,7 @@ export class RadioColumn extends BaseColumn { const { textAlign, textBaseline, + padding, checkColor, uncheckBorderColor, checkBorderColor, @@ -58,6 +59,7 @@ export class RadioColumn extends BaseColumn { checkBorderColor, uncheckBgColor, checkBgColor, + padding, }; if (elapsed != null) { opt.animElapsedTime = elapsed; diff --git a/packages/cheetah-grid/src/js/ts-types/column/style.ts b/packages/cheetah-grid/src/js/ts-types/column/style.ts index 1293fc42..7084d985 100644 --- a/packages/cheetah-grid/src/js/ts-types/column/style.ts +++ b/packages/cheetah-grid/src/js/ts-types/column/style.ts @@ -33,11 +33,11 @@ export interface BaseStyleOption { export interface StdBaseStyleOption extends BaseStyleOption { textAlign?: CanvasTextAlign; textBaseline?: CanvasTextBaseline; + padding?: number | string | (number | string)[]; } export interface StdTextBaseStyleOption extends StdBaseStyleOption { color?: ColorDef; font?: string; - padding?: number | string | (number | string)[]; textOverflow?: TextOverflow; } export interface StdMultilineTextBaseStyleOption diff --git a/packages/cheetah-grid/src/js/ts-types/grid-engine.ts b/packages/cheetah-grid/src/js/ts-types/grid-engine.ts index c257d647..d26d2bff 100644 --- a/packages/cheetah-grid/src/js/ts-types/grid-engine.ts +++ b/packages/cheetah-grid/src/js/ts-types/grid-engine.ts @@ -288,6 +288,7 @@ export interface GridCanvasHelperAPI { check: boolean, context: CellContext, option: { + padding?: number | string | (number | string)[]; animElapsedTime?: number; offset?: number; uncheckBgColor?: ColorPropertyDefine; @@ -301,6 +302,7 @@ export interface GridCanvasHelperAPI { check: boolean, context: CellContext, option: { + padding?: number | string | (number | string)[]; animElapsedTime?: number; offset?: number; checkColor?: ColorPropertyDefine; diff --git a/packages/cheetah-grid/src/test/ListGrid_sample_for_layout.js b/packages/cheetah-grid/src/test/ListGrid_sample_for_layout.js index 07c4c39b..e77e4421 100644 --- a/packages/cheetah-grid/src/test/ListGrid_sample_for_layout.js +++ b/packages/cheetah-grid/src/test/ListGrid_sample_for_layout.js @@ -120,7 +120,6 @@ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deseru records.sort(function(r1, r2) { return compare(r1.personid, r2.personid); }); grid.records = records; }, - // sort style: {padding: [0, 0, 0, '1.2em']}, rowSpan: 3 }, @@ -129,7 +128,29 @@ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deseru caption: 'read', width: 50, columnType: 'check', - rowSpan: 3 + rowSpan: 3, + }, + { + field: 'checkReadOnly', + caption: 'check on top', + width: 50, + columnType: 'check', + rowSpan: 3, + style: { + padding: [11, 0, 0, 0], + textBaseline: 'top' + }, + }, + { + field: 'checkReadOnly', + caption: 'radio on top', + width: 50, + columnType: 'radio', + rowSpan: 3, + style: { + padding: [11, 0, 0, 0], + textBaseline: 'top' + }, }, { caption: 'name', diff --git a/packages/docs/api/js/column_styles/index.md b/packages/docs/api/js/column_styles/index.md index b95108f3..657816c6 100644 --- a/packages/docs/api/js/column_styles/index.md +++ b/packages/docs/api/js/column_styles/index.md @@ -4,25 +4,38 @@ order: 130 # Define Column Styles -## Standard Column Style - Define column style by using `style` property. +## Standard Column Style + Properties below are prepared in standard. -| Property | Description | -| ------------ | --------------------------------------------------------------------------------------------------------------- | -| color | Define the color of cell. | -| textAlign | Define the horizontal position of text in cell. | -| textBaseline | Define the vertical position of text in cell. | -| bgColor | Define the background color of cell. | -| font | Define the font of cell. | -| padding | Define the padding of cell. If you set 4 values separately, please set the `Array`. | -| textOverflow | Define how to display when text overflows the area of a cell. `clip` or `ellipsis` is available. | -| visibility | Specifying `hidden` to it will stop drawing the cell's content. Note that this does not stop the cell's action. | +| Property | Description | +| ---------------------- | ----------------------------------------------------------------------------------------------------------------- | +| `bgColor` | Define the background color of cell. | +| `visibility` | Specifying `"hidden"` to it will stop drawing the cell's content. Note that this does not stop the cell's action. | +| `indicatorTopLeft` | Define the indicator of cell in the top left. See [Indicators](./indicators.md) for more information. | +| `indicatorTopRight` | Define the indicator of cell in the top right. See [Indicators](./indicators.md) for more information. | +| `indicatorBottomRight` | Define the indicator of cell in the bottom right. See [Indicators](./indicators.md) for more information. | +| `indicatorBottomLeft` | Define the indicator of cell in the bottom left. See [Indicators](./indicators.md) for more information. | Note that the column type may add style properties that you can use. The properties added are described in the documentation for each column type. +### Standard Text Column Style + +Most column types also have the style properties listed below, but not all do. + +| Property | Description | +| -------------- | ------------------------------------------------------------------------------------------------ | +| `textAlign` | Define the horizontal position of text in cell. | +| `textBaseline` | Define the vertical position of text in cell. | +| `color` | Define the color of cell. | +| `font` | Define the font of cell. | +| `padding` | Define the padding of cell. If you set 4 values separately, please set the `Array`. | +| `textOverflow` | Define how to display when text overflows the area of a cell. `clip` or `ellipsis` is available. | + +### Examples + ```html diff --git a/packages/docs/api/js/column_types/ButtonColumn.md b/packages/docs/api/js/column_types/ButtonColumn.md index 918d518c..36ba11fd 100644 --- a/packages/docs/api/js/column_types/ButtonColumn.md +++ b/packages/docs/api/js/column_types/ButtonColumn.md @@ -14,9 +14,15 @@ Show the button. ## Style Properties -| Property | Description | Default | -| --------------- | ---------------------------------- | --------------------- | -| `buttonBgColor` | Define background color of button. | Resolve by the theme. | +| Property | Description | Default | +| --------------- | ------------------------------------------------------------------------------------------------ | --------------------- | +| `buttonBgColor` | Define background color of button. | Resolve by the theme. | +| `textAlign` | Define the horizontal position of text in cell. | `'center'` | +| `textBaseline` | Define the vertical position of text in cell. | `'middle'` | +| `color` | Define the color of cell. | Resolve by the theme. | +| `font` | Define the font of cell. | -- | +| `padding` | Define the padding of cell. If you set 4 values separately, please set the `Array`. | -- | +| `textOverflow` | Define how to display when text overflows the area of a cell. `clip` or `ellipsis` is available. | `'clip'` | In addition to this, the Standard styles is available. diff --git a/packages/docs/api/js/column_types/CheckColumn.md b/packages/docs/api/js/column_types/CheckColumn.md index 9f6dd2ed..ee6bf526 100644 --- a/packages/docs/api/js/column_types/CheckColumn.md +++ b/packages/docs/api/js/column_types/CheckColumn.md @@ -10,14 +10,19 @@ To make it editable, please use [CheckEditor](../column_actions/CheckEditor.md). ## Style Properties -| Property | Description | Default | -| ---------------- | ---------------------------------------------------------- | --------------------- | -| `checkBgColor` | Define background color of checkbox, when it is checked. | Resolve by the theme. | -| `uncheckBgColor` | Define background color of checkbox, when it is unchecked. | Resolve by the theme. | -| `borderColor` | Define border color of checkbox. | Resolve by the theme. | -| `textAlign` | Define horizontal position of checkbox in cell. | `'center'` | -| `textBaseline` | Define vertical position of checkbox in cell. | -- | -| `bgColor` | Define background color of cell. | Resolve by the theme. | +| Property | Description | Default | +| ---------------- | ----------------------------------------------------------------------------------- | --------------------- | +| `checkBgColor` | Define background color of checkbox, when it is checked. | Resolve by the theme. | +| `uncheckBgColor` | Define background color of checkbox, when it is unchecked. | Resolve by the theme. | +| `borderColor` | Define border color of checkbox. | Resolve by the theme. | +| `textAlign` | Define horizontal position of checkbox in cell. | `'center'` | +| `textBaseline` | Define vertical position of checkbox in cell. | `'middle'` | +| `padding` | Define the padding of cell. If you set 4 values separately, please set the `Array`. | -- | +| `bgColor` | Define background color of cell. | Resolve by the theme. | + +In addition to this, the Standard styles is available. + +- [Standard Column Style](../column_styles/index.md) diff --git a/packages/docs/api/js/column_types/IconColumn.md b/packages/docs/api/js/column_types/IconColumn.md index 19c077c1..4cdd8afe 100644 --- a/packages/docs/api/js/column_types/IconColumn.md +++ b/packages/docs/api/js/column_types/IconColumn.md @@ -65,3 +65,19 @@ grid.records = [ + +## Style Properties + +| Property | Description | Default | +| -------------- | ------------------------------------------------------------------------------------------------ | --------------------- | +| `textAlign` | Define horizontal position of icon in cell. | `'center'` | +| `textBaseline` | Define vertical position of icon in cell. | `'middle'` | +| `padding` | Define the padding of cell. If you set 4 values separately, please set the `Array`. | -- | +| `color` | Define the color of cell. | Resolve by the theme. | +| `font` | Define the font of cell. | -- | +| `padding` | Define the padding of cell. If you set 4 values separately, please set the `Array`. | -- | +| `textOverflow` | Define how to display when text overflows the area of a cell. `clip` or `ellipsis` is available. | `'clip'` | + +In addition to this, the Standard styles is available. + +- [Standard Column Style](../column_styles/index.md) diff --git a/packages/docs/api/js/column_types/ImageColumn.md b/packages/docs/api/js/column_types/ImageColumn.md index b4006e6a..01de5b06 100644 --- a/packages/docs/api/js/column_types/ImageColumn.md +++ b/packages/docs/api/js/column_types/ImageColumn.md @@ -84,3 +84,17 @@ grid.configure("fadeinWhenCallbackInPromise", true); ``` + +## Style Properties + +| Property | Description | Default | +| -------------- | ----------------------------------------------------------------------------------- | ---------- | +| `imageSizing` | Defining "keep-aspect-ratio" will keep the aspect ratio. | -- | +| `margin` | Define margin of image. | `4` | +| `textAlign` | Define horizontal position of image in cell. | `'center'` | +| `textBaseline` | Define vertical position of image in cell. | `'middle'` | +| `padding` | Define the padding of cell. If you set 4 values separately, please set the `Array`. | -- | + +In addition to this, the Standard styles is available. + +- [Standard Column Style](../column_styles/index.md) diff --git a/packages/docs/api/js/column_types/MenuColumn.md b/packages/docs/api/js/column_types/MenuColumn.md index 21e2c631..8e845662 100644 --- a/packages/docs/api/js/column_types/MenuColumn.md +++ b/packages/docs/api/js/column_types/MenuColumn.md @@ -16,9 +16,15 @@ To make it editable, please use [InlineMenuEditor](../column_actions/InlineMenuE ## Style Properties -| Property | Description | Default | -| ------------ | ------------------------------------------------------------------------------------------ | ------------------- | -| `appearance` | Defines whether to display a dropdown arrow. (you can set `'menulist-button'` or `'none'`) | `'menulist-button'` | +| Property | Description | Default | +| -------------- | ------------------------------------------------------------------------------------------------ | --------------------- | +| `appearance` | Defines whether to display a dropdown arrow. (you can set `'menulist-button'` or `'none'`) | `'menulist-button'` | +| `textAlign` | Define the horizontal position of text in cell. | `'left'` | +| `textBaseline` | Define the vertical position of text in cell. | `'middle'` | +| `color` | Define the color of cell. | Resolve by the theme. | +| `font` | Define the font of cell. | -- | +| `padding` | Define the padding of cell. If you set 4 values separately, please set the `Array`. | -- | +| `textOverflow` | Define how to display when text overflows the area of a cell. `clip` or `ellipsis` is available. | `'clip'` | In addition to this, Standard styles is available. diff --git a/packages/docs/api/js/column_types/MultilineTextColumn.md b/packages/docs/api/js/column_types/MultilineTextColumn.md index 92da8946..8d484293 100644 --- a/packages/docs/api/js/column_types/MultilineTextColumn.md +++ b/packages/docs/api/js/column_types/MultilineTextColumn.md @@ -12,11 +12,17 @@ You can display multiple lines of text in a cell. ## Style Properties -| Property | Description | Default | -| -------------- | ---------------------------------------------------- | ------- | -| `lineHeight` | Define the amount of space used for lines | -- | -| `autoWrapText` | Define whether to wrap automatically. | -- | -| `lineClamp` | Define truncates text at a specific number of lines. | -- | +| Property | Description | Default | +| -------------- | ------------------------------------------------------------------------------------------------ | --------------------- | +| `lineHeight` | Define the amount of space used for lines | -- | +| `autoWrapText` | Define whether to wrap automatically. | -- | +| `lineClamp` | Define truncates text at a specific number of lines. | -- | +| `textAlign` | Define the horizontal position of text in cell. | `'left'` | +| `textBaseline` | Define the vertical position of text in cell. | `'top'` | +| `color` | Define the color of cell. | Resolve by the theme. | +| `font` | Define the font of cell. | -- | +| `padding` | Define the padding of cell. If you set 4 values separately, please set the `Array`. | -- | +| `textOverflow` | Define how to display when text overflows the area of a cell. `clip` or `ellipsis` is available. | `'clip'` | In addition to this, the Standard styles is available. diff --git a/packages/docs/api/js/column_types/NumberColumn.md b/packages/docs/api/js/column_types/NumberColumn.md index a92e9f3c..197444a6 100644 --- a/packages/docs/api/js/column_types/NumberColumn.md +++ b/packages/docs/api/js/column_types/NumberColumn.md @@ -22,6 +22,15 @@ In addition, this column type behave same as `columnType: 'number'`. ## Style Properties +| Property | Description | Default | +| -------------- | ------------------------------------------------------------------------------------------------ | --------------------- | +| `textAlign` | Define the horizontal position of text in cell. | `'right'` | +| `textBaseline` | Define the vertical position of text in cell. | `'middle'` | +| `color` | Define the color of cell. | Resolve by the theme. | +| `font` | Define the font of cell. | -- | +| `padding` | Define the padding of cell. If you set 4 values separately, please set the `Array`. | -- | +| `textOverflow` | Define how to display when text overflows the area of a cell. `clip` or `ellipsis` is available. | `'clip'` | + Standard styles is available. - [Standard Column Style](../column_styles/index.md) diff --git a/packages/docs/api/js/column_types/PercentCompleteBarColumn.md b/packages/docs/api/js/column_types/PercentCompleteBarColumn.md index 00bef029..7ec7a217 100644 --- a/packages/docs/api/js/column_types/PercentCompleteBarColumn.md +++ b/packages/docs/api/js/column_types/PercentCompleteBarColumn.md @@ -16,11 +16,17 @@ Show the percent complete bar. ## Style Properties -| Property | Description | Default | -| ------------ | ------------------------------------------------------------------------------ | ------- | -| `barColor` | Define color of bar. you can set a function that returns color from the value. | -- | -| `barBgColor` | Define background color of bar. | -- | -| `barHeight` | Define height of bar. | -- | +| Property | Description | Default | +| -------------- | ------------------------------------------------------------------------------------------------ | --------------------- | +| `barColor` | Define color of bar. you can set a function that returns color from the value. | -- | +| `barBgColor` | Define background color of bar. | -- | +| `barHeight` | Define height of bar. | -- | +| `textAlign` | Define the horizontal position of text in cell. | `'left'` | +| `textBaseline` | Define the vertical position of text in cell. | `'middle'` | +| `color` | Define the color of cell. | Resolve by the theme. | +| `font` | Define the font of cell. | -- | +| `padding` | Define the padding of cell. If you set 4 values separately, please set the `Array`. | -- | +| `textOverflow` | Define how to display when text overflows the area of a cell. `clip` or `ellipsis` is available. | `'clip'` | In addition to this, the Standard styles is available. diff --git a/packages/docs/api/js/column_types/RadioColumn.md b/packages/docs/api/js/column_types/RadioColumn.md index 3154a790..f07e186a 100644 --- a/packages/docs/api/js/column_types/RadioColumn.md +++ b/packages/docs/api/js/column_types/RadioColumn.md @@ -12,14 +12,18 @@ To make it editable, please use [RadioEditor](../column_actions/RadioEditor.md). | Property | Description | Default | | -------------------- | -------------------------------------------------------------- | --------------------- | -| `checkColor` | Define check mark color of radio button. | resolve by the theme. | -| `checkBgColor` | Define background color of radio button, when it is checked. | resolve by the theme. | -| `uncheckBgColor` | Define background color of radio button, when it is unchecked. | resolve by the theme. | -| `checkBorderColor` | Define border color of radio button, when it is checked. | resolve by the theme. | -| `uncheckBorderColor` | Define border color of radio button, when it is unchecked. | resolve by the theme. | +| `checkColor` | Define check mark color of radio button. | Resolve by the theme. | +| `checkBgColor` | Define background color of radio button, when it is checked. | Resolve by the theme. | +| `uncheckBgColor` | Define background color of radio button, when it is unchecked. | Resolve by the theme. | +| `checkBorderColor` | Define border color of radio button, when it is checked. | Resolve by the theme. | +| `uncheckBorderColor` | Define border color of radio button, when it is unchecked. | Resolve by the theme. | | `textAlign` | Define horizontal position of radio button in cell. | `'center'` | -| `textBaseline` | Define vertical position of radio button in cell. | -- | -| `bgColor` | Define background color of cell. | resolve by the theme. | +| `textBaseline` | Define vertical position of radio button in cell. | `'middle'` | +| `bgColor` | Define background color of cell. | Resolve by the theme. | + +In addition to this, the Standard styles is available. + +- [Standard Column Style](../column_styles/index.md) diff --git a/packages/docs/api/js/column_types/TreeColumn.md b/packages/docs/api/js/column_types/TreeColumn.md index 28ed6051..c271f22c 100644 --- a/packages/docs/api/js/column_types/TreeColumn.md +++ b/packages/docs/api/js/column_types/TreeColumn.md @@ -16,12 +16,22 @@ TreeColumn class does not have the feature to open and close branch nodes, you m ## Style Properties -| Property | Description | -| ----------- | --------------------------------------------------------------------------------------------------------------- | -| `lineColor` | Sets the tree lines color. | -| `lineStyle` | Sets the tree lines style. Allowed values ​​are `'none'` or `'solid'` | -| `lineWidth` | Sets the with of of the tree lines. | -| `treeIcon` | Sets the icon to display on the node tree. Allowed values ​​are `"chevron_right"`, `"expand_more"` or `"none"`. | +| Property | Description | Default | +| -------------- | --------------------------------------------------------------------------------------------------------------- | --------------------- | +| `lineColor` | Sets the tree lines color. | Resolve by the theme. | +| `lineStyle` | Sets the tree lines style. Allowed values ​​are `'none'` or `'solid'` | Resolve by the theme. | +| `lineWidth` | Sets the with of of the tree lines. | Resolve by the theme. | +| `treeIcon` | Sets the icon to display on the node tree. Allowed values ​​are `"chevron_right"`, `"expand_more"` or `"none"`. | Resolve by the theme. | +| `textAlign` | Define the horizontal position of text in cell. | `'left'` | +| `textBaseline` | Define the vertical position of text in cell. | `'middle'` | +| `color` | Define the color of cell. | Resolve by the theme. | +| `font` | Define the font of cell. | -- | +| `padding` | Define the padding of cell. If you set 4 values separately, please set the `Array`. | -- | +| `textOverflow` | Define how to display when text overflows the area of a cell. `clip` or `ellipsis` is available. | `'clip'` | + +In addition to this, the Standard styles is available. + +- [Standard Column Style](../column_styles/index.md) ## Data Format