ant-design/components/table/style/index.ts

601 lines
18 KiB
TypeScript
Raw Normal View History

import { unit } from '@ant-design/cssinjs';
import type { CSSObject } from '@ant-design/cssinjs';
refactor: Table to CSS-IN-JS (#35584) * style: add basic styles of table * style: add basic border styles of table * style: add more styles of table * style: add more styles of table * style: add pagination and summary styles * add more styles * style: add cell-ellipsis styles * style: add Radius style * style: add basic styles of table * style: add basic border styles of table * style: add more styles of table * style: add more styles of table * style: add pagination and summary styles * add more styles * style: add cell-ellipsis styles * style: add Radius style * style: add sorter style * style: add sorter style * style: add filter style * style: add filter style * style: add filter style * style: fix filter and sort style * style: fix bordered style * style: fix bordered style * style: fix bordered style * style: add size style * style: fix size style * style: add selection style * style: format code * style: add sticky code * style: add expand code * style: add expand code * style: add expand code * style: add fixed code * add fixed style * style: fix diff place * style: use number as px string * chore: improve function name * chore: use token * style: rtl styles * chore: fix marigin and padding logical properties * fix: rtl styles * fix: table filter dropdown style * chore: remove useStyle * chore: revert classNames * fix: test case * fix shadow in rtl * Apply suggestions from code review * chore: sub filter tree * style: fix tree dropdown padding Co-authored-by: zombiej <smith3816@gmail.com>
2022-05-31 10:10:35 +08:00
import { TinyColor } from '@ctrl/tinycolor';
import { clearFix, resetComponent } from '../../style';
import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
import { genStyleHooks, mergeToken } from '../../theme/internal';
refactor: Table to CSS-IN-JS (#35584) * style: add basic styles of table * style: add basic border styles of table * style: add more styles of table * style: add more styles of table * style: add pagination and summary styles * add more styles * style: add cell-ellipsis styles * style: add Radius style * style: add basic styles of table * style: add basic border styles of table * style: add more styles of table * style: add more styles of table * style: add pagination and summary styles * add more styles * style: add cell-ellipsis styles * style: add Radius style * style: add sorter style * style: add sorter style * style: add filter style * style: add filter style * style: add filter style * style: fix filter and sort style * style: fix bordered style * style: fix bordered style * style: fix bordered style * style: add size style * style: fix size style * style: add selection style * style: format code * style: add sticky code * style: add expand code * style: add expand code * style: add expand code * style: add fixed code * add fixed style * style: fix diff place * style: use number as px string * chore: improve function name * chore: use token * style: rtl styles * chore: fix marigin and padding logical properties * fix: rtl styles * fix: table filter dropdown style * chore: remove useStyle * chore: revert classNames * fix: test case * fix shadow in rtl * Apply suggestions from code review * chore: sub filter tree * style: fix tree dropdown padding Co-authored-by: zombiej <smith3816@gmail.com>
2022-05-31 10:10:35 +08:00
import genBorderedStyle from './bordered';
import genEllipsisStyle from './ellipsis';
import genEmptyStyle from './empty';
import genExpandStyle from './expand';
import genFilterStyle from './filter';
import genFixedStyle from './fixed';
import genPaginationStyle from './pagination';
refactor: Table to CSS-IN-JS (#35584) * style: add basic styles of table * style: add basic border styles of table * style: add more styles of table * style: add more styles of table * style: add pagination and summary styles * add more styles * style: add cell-ellipsis styles * style: add Radius style * style: add basic styles of table * style: add basic border styles of table * style: add more styles of table * style: add more styles of table * style: add pagination and summary styles * add more styles * style: add cell-ellipsis styles * style: add Radius style * style: add sorter style * style: add sorter style * style: add filter style * style: add filter style * style: add filter style * style: fix filter and sort style * style: fix bordered style * style: fix bordered style * style: fix bordered style * style: add size style * style: fix size style * style: add selection style * style: format code * style: add sticky code * style: add expand code * style: add expand code * style: add expand code * style: add fixed code * add fixed style * style: fix diff place * style: use number as px string * chore: improve function name * chore: use token * style: rtl styles * chore: fix marigin and padding logical properties * fix: rtl styles * fix: table filter dropdown style * chore: remove useStyle * chore: revert classNames * fix: test case * fix shadow in rtl * Apply suggestions from code review * chore: sub filter tree * style: fix tree dropdown padding Co-authored-by: zombiej <smith3816@gmail.com>
2022-05-31 10:10:35 +08:00
import genRadiusStyle from './radius';
import genRtlStyle from './rtl';
import genSelectionStyle from './selection';
import genSizeStyle from './size';
import genSorterStyle from './sorter';
import genStickyStyle from './sticky';
import genSummaryStyle from './summary';
import genVirtualStyle from './virtual';
refactor: Table to CSS-IN-JS (#35584) * style: add basic styles of table * style: add basic border styles of table * style: add more styles of table * style: add more styles of table * style: add pagination and summary styles * add more styles * style: add cell-ellipsis styles * style: add Radius style * style: add basic styles of table * style: add basic border styles of table * style: add more styles of table * style: add more styles of table * style: add pagination and summary styles * add more styles * style: add cell-ellipsis styles * style: add Radius style * style: add sorter style * style: add sorter style * style: add filter style * style: add filter style * style: add filter style * style: fix filter and sort style * style: fix bordered style * style: fix bordered style * style: fix bordered style * style: add size style * style: fix size style * style: add selection style * style: format code * style: add sticky code * style: add expand code * style: add expand code * style: add expand code * style: add fixed code * add fixed style * style: fix diff place * style: use number as px string * chore: improve function name * chore: use token * style: rtl styles * chore: fix marigin and padding logical properties * fix: rtl styles * fix: table filter dropdown style * chore: remove useStyle * chore: revert classNames * fix: test case * fix shadow in rtl * Apply suggestions from code review * chore: sub filter tree * style: fix tree dropdown padding Co-authored-by: zombiej <smith3816@gmail.com>
2022-05-31 10:10:35 +08:00
export interface ComponentToken {
/**
* @desc
* @descEN Background of table header
*/
headerBg: string;
/**
* @desc
* @descEN Color of table header text
*/
headerColor: string;
/**
* @desc
* @descEN Background color of table header when sorted
*/
headerSortActiveBg: string;
/**
* @desc
* @descEN Background color of table header when sorted and hovered
*/
headerSortHoverBg: string;
/**
* @desc
* @descEN Background color of table sorted column
*/
bodySortBg: string;
/**
* @desc
* @descEN Background color of table hovered row
*/
rowHoverBg: string;
/**
* @desc
* @descEN Background color of table selected row
*/
rowSelectedBg: string;
/**
* @desc
* @descEN Background color of table selected row when hovered
*/
rowSelectedHoverBg: string;
/**
* @desc
* @descEN Background color of table expanded row
*/
rowExpandedBg: string;
/**
* @desc
* @descEN Vertical padding of table cell
*/
cellPaddingBlock: number;
/**
* @desc
* @descEN Horizontal padding of table cell (large size by default)
*/
cellPaddingInline: number;
/**
* @desc
* @descEN Vertical padding of table cell (middle size)
*/
cellPaddingBlockMD: number;
/**
* @desc
* @descEN Horizontal padding of table cell (middle size)
*/
cellPaddingInlineMD: number;
/**
* @desc
* @descEN Vertical padding of table cell (small size)
*/
cellPaddingBlockSM: number;
/**
* @desc
* @descEN Horizontal padding of table cell (small size)
*/
cellPaddingInlineSM: number;
/**
* @desc /线
* @descEN Border color of table
*/
borderColor: string;
/**
* @desc
* @descEN Border radius of table header
*/
headerBorderRadius: number;
/**
* @desc
* @descEN Background of footer
*/
footerBg: string;
/**
* @desc
* @descEN Color of footer text
*/
footerColor: string;
/**
* @desc
* @descEN Font size of table cell (large size by default)
*/
cellFontSize: number;
/**
* @desc
* @descEN Font size of table cell (middle size)
*/
cellFontSizeMD: number;
/**
* @desc
* @descEN Font size of table cell (small size)
*/
cellFontSizeSM: number;
/**
* @desc 线
* @descEN Split border color of table header
*/
headerSplitColor: string;
/**
* @desc
* @descEN Background color of fixed table header when sorted
*/
fixedHeaderSortActiveBg: string;
/**
* @desc
* @descEN Background color of table header filter button when hovered
*/
headerFilterHoverBg: string;
/**
* @desc
* @descEN Background of filter dropdown menu item
*/
filterDropdownMenuBg: string;
/**
* @desc
* @descEN Color of filter dropdown
*/
filterDropdownBg: string;
/**
* @desc
* @descEN Background of expand button
*/
expandIconBg: string;
/**
* @desc
* @descEN Width of selection column
*/
selectionColumnWidth: number | string;
/**
* @desc Sticky
* @descEN Background of sticky scrollbar
*/
stickyScrollBarBg: string;
/**
* @desc Sticky
* @descEN Border radius of sticky scrollbar
*/
stickyScrollBarBorderRadius: number;
/** @internal */
expandIconMarginTop: number;
/** @internal */
expandIconHalfInner: number;
/** @internal */
expandIconSize: number;
/** @internal */
expandIconScale: number;
/** @internal */
headerIconColor: string;
/** @internal */
headerIconHoverColor: string;
}
refactor: Table to CSS-IN-JS (#35584) * style: add basic styles of table * style: add basic border styles of table * style: add more styles of table * style: add more styles of table * style: add pagination and summary styles * add more styles * style: add cell-ellipsis styles * style: add Radius style * style: add basic styles of table * style: add basic border styles of table * style: add more styles of table * style: add more styles of table * style: add pagination and summary styles * add more styles * style: add cell-ellipsis styles * style: add Radius style * style: add sorter style * style: add sorter style * style: add filter style * style: add filter style * style: add filter style * style: fix filter and sort style * style: fix bordered style * style: fix bordered style * style: fix bordered style * style: add size style * style: fix size style * style: add selection style * style: format code * style: add sticky code * style: add expand code * style: add expand code * style: add expand code * style: add fixed code * add fixed style * style: fix diff place * style: use number as px string * chore: improve function name * chore: use token * style: rtl styles * chore: fix marigin and padding logical properties * fix: rtl styles * fix: table filter dropdown style * chore: remove useStyle * chore: revert classNames * fix: test case * fix shadow in rtl * Apply suggestions from code review * chore: sub filter tree * style: fix tree dropdown padding Co-authored-by: zombiej <smith3816@gmail.com>
2022-05-31 10:10:35 +08:00
export interface TableToken extends FullToken<'Table'> {
tableFontSize: number;
tableBg: string;
tableRadius: number;
tablePaddingHorizontal: number;
tablePaddingVertical: number;
tablePaddingHorizontalMiddle: number;
tablePaddingVerticalMiddle: number;
tablePaddingHorizontalSmall: number;
tablePaddingVerticalSmall: number;
tableBorderColor: string;
tableHeaderTextColor: string;
tableHeaderBg: string;
tableFooterTextColor: string;
tableFooterBg: string;
tableHeaderCellSplitColor: string;
tableHeaderSortBg: string;
tableHeaderSortHoverBg: string;
tableBodySortBg: string;
tableFixedHeaderSortActiveBg: string;
tableHeaderFilterActiveBg: string;
tableFilterDropdownBg: string;
tableFilterDropdownHeight: number | string;
refactor: Table to CSS-IN-JS (#35584) * style: add basic styles of table * style: add basic border styles of table * style: add more styles of table * style: add more styles of table * style: add pagination and summary styles * add more styles * style: add cell-ellipsis styles * style: add Radius style * style: add basic styles of table * style: add basic border styles of table * style: add more styles of table * style: add more styles of table * style: add pagination and summary styles * add more styles * style: add cell-ellipsis styles * style: add Radius style * style: add sorter style * style: add sorter style * style: add filter style * style: add filter style * style: add filter style * style: fix filter and sort style * style: fix bordered style * style: fix bordered style * style: fix bordered style * style: add size style * style: fix size style * style: add selection style * style: format code * style: add sticky code * style: add expand code * style: add expand code * style: add expand code * style: add fixed code * add fixed style * style: fix diff place * style: use number as px string * chore: improve function name * chore: use token * style: rtl styles * chore: fix marigin and padding logical properties * fix: rtl styles * fix: table filter dropdown style * chore: remove useStyle * chore: revert classNames * fix: test case * fix shadow in rtl * Apply suggestions from code review * chore: sub filter tree * style: fix tree dropdown padding Co-authored-by: zombiej <smith3816@gmail.com>
2022-05-31 10:10:35 +08:00
tableRowHoverBg: string;
tableSelectedRowBg: string;
tableSelectedRowHoverBg: string;
tableFontSizeMiddle: number;
tableFontSizeSmall: number;
tableSelectionColumnWidth: number | string;
refactor: Table to CSS-IN-JS (#35584) * style: add basic styles of table * style: add basic border styles of table * style: add more styles of table * style: add more styles of table * style: add pagination and summary styles * add more styles * style: add cell-ellipsis styles * style: add Radius style * style: add basic styles of table * style: add basic border styles of table * style: add more styles of table * style: add more styles of table * style: add pagination and summary styles * add more styles * style: add cell-ellipsis styles * style: add Radius style * style: add sorter style * style: add sorter style * style: add filter style * style: add filter style * style: add filter style * style: fix filter and sort style * style: fix bordered style * style: fix bordered style * style: fix bordered style * style: add size style * style: fix size style * style: add selection style * style: format code * style: add sticky code * style: add expand code * style: add expand code * style: add expand code * style: add fixed code * add fixed style * style: fix diff place * style: use number as px string * chore: improve function name * chore: use token * style: rtl styles * chore: fix marigin and padding logical properties * fix: rtl styles * fix: table filter dropdown style * chore: remove useStyle * chore: revert classNames * fix: test case * fix shadow in rtl * Apply suggestions from code review * chore: sub filter tree * style: fix tree dropdown padding Co-authored-by: zombiej <smith3816@gmail.com>
2022-05-31 10:10:35 +08:00
tableExpandIconBg: string;
tableExpandColumnWidth: number | string;
refactor: Table to CSS-IN-JS (#35584) * style: add basic styles of table * style: add basic border styles of table * style: add more styles of table * style: add more styles of table * style: add pagination and summary styles * add more styles * style: add cell-ellipsis styles * style: add Radius style * style: add basic styles of table * style: add basic border styles of table * style: add more styles of table * style: add more styles of table * style: add pagination and summary styles * add more styles * style: add cell-ellipsis styles * style: add Radius style * style: add sorter style * style: add sorter style * style: add filter style * style: add filter style * style: add filter style * style: fix filter and sort style * style: fix bordered style * style: fix bordered style * style: fix bordered style * style: add size style * style: fix size style * style: add selection style * style: format code * style: add sticky code * style: add expand code * style: add expand code * style: add expand code * style: add fixed code * add fixed style * style: fix diff place * style: use number as px string * chore: improve function name * chore: use token * style: rtl styles * chore: fix marigin and padding logical properties * fix: rtl styles * fix: table filter dropdown style * chore: remove useStyle * chore: revert classNames * fix: test case * fix shadow in rtl * Apply suggestions from code review * chore: sub filter tree * style: fix tree dropdown padding Co-authored-by: zombiej <smith3816@gmail.com>
2022-05-31 10:10:35 +08:00
tableExpandedRowBg: string;
tableFilterDropdownWidth: number;
tableFilterDropdownSearchWidth: number;
// Z-Index
zIndexTableFixed: number;
zIndexTableSticky: number | string;
// Virtual Scroll Bar
tableScrollThumbSize: number;
tableScrollThumbBg: string;
tableScrollThumbBgHover: string;
tableScrollBg: string;
refactor: Table to CSS-IN-JS (#35584) * style: add basic styles of table * style: add basic border styles of table * style: add more styles of table * style: add more styles of table * style: add pagination and summary styles * add more styles * style: add cell-ellipsis styles * style: add Radius style * style: add basic styles of table * style: add basic border styles of table * style: add more styles of table * style: add more styles of table * style: add pagination and summary styles * add more styles * style: add cell-ellipsis styles * style: add Radius style * style: add sorter style * style: add sorter style * style: add filter style * style: add filter style * style: add filter style * style: fix filter and sort style * style: fix bordered style * style: fix bordered style * style: fix bordered style * style: add size style * style: fix size style * style: add selection style * style: format code * style: add sticky code * style: add expand code * style: add expand code * style: add expand code * style: add fixed code * add fixed style * style: fix diff place * style: use number as px string * chore: improve function name * chore: use token * style: rtl styles * chore: fix marigin and padding logical properties * fix: rtl styles * fix: table filter dropdown style * chore: remove useStyle * chore: revert classNames * fix: test case * fix shadow in rtl * Apply suggestions from code review * chore: sub filter tree * style: fix tree dropdown padding Co-authored-by: zombiej <smith3816@gmail.com>
2022-05-31 10:10:35 +08:00
}
const genTableStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
const {
componentCls,
fontWeightStrong,
tablePaddingVertical,
tablePaddingHorizontal,
tableExpandColumnWidth,
lineWidth,
lineType,
tableBorderColor,
tableFontSize,
tableBg,
tableRadius,
tableHeaderTextColor,
motionDurationMid,
tableHeaderBg,
tableHeaderCellSplitColor,
tableFooterTextColor,
tableFooterBg,
calc,
} = token;
const tableBorder = `${unit(lineWidth)} ${lineType} ${tableBorderColor}`;
refactor: Table to CSS-IN-JS (#35584) * style: add basic styles of table * style: add basic border styles of table * style: add more styles of table * style: add more styles of table * style: add pagination and summary styles * add more styles * style: add cell-ellipsis styles * style: add Radius style * style: add basic styles of table * style: add basic border styles of table * style: add more styles of table * style: add more styles of table * style: add pagination and summary styles * add more styles * style: add cell-ellipsis styles * style: add Radius style * style: add sorter style * style: add sorter style * style: add filter style * style: add filter style * style: add filter style * style: fix filter and sort style * style: fix bordered style * style: fix bordered style * style: fix bordered style * style: add size style * style: fix size style * style: add selection style * style: format code * style: add sticky code * style: add expand code * style: add expand code * style: add expand code * style: add fixed code * add fixed style * style: fix diff place * style: use number as px string * chore: improve function name * chore: use token * style: rtl styles * chore: fix marigin and padding logical properties * fix: rtl styles * fix: table filter dropdown style * chore: remove useStyle * chore: revert classNames * fix: test case * fix shadow in rtl * Apply suggestions from code review * chore: sub filter tree * style: fix tree dropdown padding Co-authored-by: zombiej <smith3816@gmail.com>
2022-05-31 10:10:35 +08:00
return {
[`${componentCls}-wrapper`]: {
clear: 'both',
maxWidth: '100%',
...clearFix(),
[componentCls]: {
...resetComponent(token),
fontSize: tableFontSize,
background: tableBg,
borderRadius: `${unit(tableRadius)} ${unit(tableRadius)} 0 0`,
// https://github.com/ant-design/ant-design/issues/47486
scrollbarColor: `${token.tableScrollThumbBg} ${token.tableScrollBg}`,
refactor: Table to CSS-IN-JS (#35584) * style: add basic styles of table * style: add basic border styles of table * style: add more styles of table * style: add more styles of table * style: add pagination and summary styles * add more styles * style: add cell-ellipsis styles * style: add Radius style * style: add basic styles of table * style: add basic border styles of table * style: add more styles of table * style: add more styles of table * style: add pagination and summary styles * add more styles * style: add cell-ellipsis styles * style: add Radius style * style: add sorter style * style: add sorter style * style: add filter style * style: add filter style * style: add filter style * style: fix filter and sort style * style: fix bordered style * style: fix bordered style * style: fix bordered style * style: add size style * style: fix size style * style: add selection style * style: format code * style: add sticky code * style: add expand code * style: add expand code * style: add expand code * style: add fixed code * add fixed style * style: fix diff place * style: use number as px string * chore: improve function name * chore: use token * style: rtl styles * chore: fix marigin and padding logical properties * fix: rtl styles * fix: table filter dropdown style * chore: remove useStyle * chore: revert classNames * fix: test case * fix shadow in rtl * Apply suggestions from code review * chore: sub filter tree * style: fix tree dropdown padding Co-authored-by: zombiej <smith3816@gmail.com>
2022-05-31 10:10:35 +08:00
},
// https://github.com/ant-design/ant-design/issues/17611
table: {
width: '100%',
textAlign: 'start',
borderRadius: `${unit(tableRadius)} ${unit(tableRadius)} 0 0`,
refactor: Table to CSS-IN-JS (#35584) * style: add basic styles of table * style: add basic border styles of table * style: add more styles of table * style: add more styles of table * style: add pagination and summary styles * add more styles * style: add cell-ellipsis styles * style: add Radius style * style: add basic styles of table * style: add basic border styles of table * style: add more styles of table * style: add more styles of table * style: add pagination and summary styles * add more styles * style: add cell-ellipsis styles * style: add Radius style * style: add sorter style * style: add sorter style * style: add filter style * style: add filter style * style: add filter style * style: fix filter and sort style * style: fix bordered style * style: fix bordered style * style: fix bordered style * style: add size style * style: fix size style * style: add selection style * style: format code * style: add sticky code * style: add expand code * style: add expand code * style: add expand code * style: add fixed code * add fixed style * style: fix diff place * style: use number as px string * chore: improve function name * chore: use token * style: rtl styles * chore: fix marigin and padding logical properties * fix: rtl styles * fix: table filter dropdown style * chore: remove useStyle * chore: revert classNames * fix: test case * fix shadow in rtl * Apply suggestions from code review * chore: sub filter tree * style: fix tree dropdown padding Co-authored-by: zombiej <smith3816@gmail.com>
2022-05-31 10:10:35 +08:00
borderCollapse: 'separate',
borderSpacing: 0,
},
// ============================= Cell ==============================
refactor: Table to CSS-IN-JS (#35584) * style: add basic styles of table * style: add basic border styles of table * style: add more styles of table * style: add more styles of table * style: add pagination and summary styles * add more styles * style: add cell-ellipsis styles * style: add Radius style * style: add basic styles of table * style: add basic border styles of table * style: add more styles of table * style: add more styles of table * style: add pagination and summary styles * add more styles * style: add cell-ellipsis styles * style: add Radius style * style: add sorter style * style: add sorter style * style: add filter style * style: add filter style * style: add filter style * style: fix filter and sort style * style: fix bordered style * style: fix bordered style * style: fix bordered style * style: add size style * style: fix size style * style: add selection style * style: format code * style: add sticky code * style: add expand code * style: add expand code * style: add expand code * style: add fixed code * add fixed style * style: fix diff place * style: use number as px string * chore: improve function name * chore: use token * style: rtl styles * chore: fix marigin and padding logical properties * fix: rtl styles * fix: table filter dropdown style * chore: remove useStyle * chore: revert classNames * fix: test case * fix shadow in rtl * Apply suggestions from code review * chore: sub filter tree * style: fix tree dropdown padding Co-authored-by: zombiej <smith3816@gmail.com>
2022-05-31 10:10:35 +08:00
[`
${componentCls}-cell,
refactor: Table to CSS-IN-JS (#35584) * style: add basic styles of table * style: add basic border styles of table * style: add more styles of table * style: add more styles of table * style: add pagination and summary styles * add more styles * style: add cell-ellipsis styles * style: add Radius style * style: add basic styles of table * style: add basic border styles of table * style: add more styles of table * style: add more styles of table * style: add pagination and summary styles * add more styles * style: add cell-ellipsis styles * style: add Radius style * style: add sorter style * style: add sorter style * style: add filter style * style: add filter style * style: add filter style * style: fix filter and sort style * style: fix bordered style * style: fix bordered style * style: fix bordered style * style: add size style * style: fix size style * style: add selection style * style: format code * style: add sticky code * style: add expand code * style: add expand code * style: add expand code * style: add fixed code * add fixed style * style: fix diff place * style: use number as px string * chore: improve function name * chore: use token * style: rtl styles * chore: fix marigin and padding logical properties * fix: rtl styles * fix: table filter dropdown style * chore: remove useStyle * chore: revert classNames * fix: test case * fix shadow in rtl * Apply suggestions from code review * chore: sub filter tree * style: fix tree dropdown padding Co-authored-by: zombiej <smith3816@gmail.com>
2022-05-31 10:10:35 +08:00
${componentCls}-thead > tr > th,
${componentCls}-tbody > tr > th,
refactor: Table to CSS-IN-JS (#35584) * style: add basic styles of table * style: add basic border styles of table * style: add more styles of table * style: add more styles of table * style: add pagination and summary styles * add more styles * style: add cell-ellipsis styles * style: add Radius style * style: add basic styles of table * style: add basic border styles of table * style: add more styles of table * style: add more styles of table * style: add pagination and summary styles * add more styles * style: add cell-ellipsis styles * style: add Radius style * style: add sorter style * style: add sorter style * style: add filter style * style: add filter style * style: add filter style * style: fix filter and sort style * style: fix bordered style * style: fix bordered style * style: fix bordered style * style: add size style * style: fix size style * style: add selection style * style: format code * style: add sticky code * style: add expand code * style: add expand code * style: add expand code * style: add fixed code * add fixed style * style: fix diff place * style: use number as px string * chore: improve function name * chore: use token * style: rtl styles * chore: fix marigin and padding logical properties * fix: rtl styles * fix: table filter dropdown style * chore: remove useStyle * chore: revert classNames * fix: test case * fix shadow in rtl * Apply suggestions from code review * chore: sub filter tree * style: fix tree dropdown padding Co-authored-by: zombiej <smith3816@gmail.com>
2022-05-31 10:10:35 +08:00
${componentCls}-tbody > tr > td,
tfoot > tr > th,
tfoot > tr > td
`]: {
position: 'relative',
padding: `${unit(tablePaddingVertical)} ${unit(tablePaddingHorizontal)}`,
refactor: Table to CSS-IN-JS (#35584) * style: add basic styles of table * style: add basic border styles of table * style: add more styles of table * style: add more styles of table * style: add pagination and summary styles * add more styles * style: add cell-ellipsis styles * style: add Radius style * style: add basic styles of table * style: add basic border styles of table * style: add more styles of table * style: add more styles of table * style: add pagination and summary styles * add more styles * style: add cell-ellipsis styles * style: add Radius style * style: add sorter style * style: add sorter style * style: add filter style * style: add filter style * style: add filter style * style: fix filter and sort style * style: fix bordered style * style: fix bordered style * style: fix bordered style * style: add size style * style: fix size style * style: add selection style * style: format code * style: add sticky code * style: add expand code * style: add expand code * style: add expand code * style: add fixed code * add fixed style * style: fix diff place * style: use number as px string * chore: improve function name * chore: use token * style: rtl styles * chore: fix marigin and padding logical properties * fix: rtl styles * fix: table filter dropdown style * chore: remove useStyle * chore: revert classNames * fix: test case * fix shadow in rtl * Apply suggestions from code review * chore: sub filter tree * style: fix tree dropdown padding Co-authored-by: zombiej <smith3816@gmail.com>
2022-05-31 10:10:35 +08:00
overflowWrap: 'break-word',
},
// ============================ Title =============================
[`${componentCls}-title`]: {
padding: `${unit(tablePaddingVertical)} ${unit(tablePaddingHorizontal)}`,
refactor: Table to CSS-IN-JS (#35584) * style: add basic styles of table * style: add basic border styles of table * style: add more styles of table * style: add more styles of table * style: add pagination and summary styles * add more styles * style: add cell-ellipsis styles * style: add Radius style * style: add basic styles of table * style: add basic border styles of table * style: add more styles of table * style: add more styles of table * style: add pagination and summary styles * add more styles * style: add cell-ellipsis styles * style: add Radius style * style: add sorter style * style: add sorter style * style: add filter style * style: add filter style * style: add filter style * style: fix filter and sort style * style: fix bordered style * style: fix bordered style * style: fix bordered style * style: add size style * style: fix size style * style: add selection style * style: format code * style: add sticky code * style: add expand code * style: add expand code * style: add expand code * style: add fixed code * add fixed style * style: fix diff place * style: use number as px string * chore: improve function name * chore: use token * style: rtl styles * chore: fix marigin and padding logical properties * fix: rtl styles * fix: table filter dropdown style * chore: remove useStyle * chore: revert classNames * fix: test case * fix shadow in rtl * Apply suggestions from code review * chore: sub filter tree * style: fix tree dropdown padding Co-authored-by: zombiej <smith3816@gmail.com>
2022-05-31 10:10:35 +08:00
},
// ============================ Header ============================
[`${componentCls}-thead`]: {
[`
> tr > th,
> tr > td
`]: {
refactor: Table to CSS-IN-JS (#35584) * style: add basic styles of table * style: add basic border styles of table * style: add more styles of table * style: add more styles of table * style: add pagination and summary styles * add more styles * style: add cell-ellipsis styles * style: add Radius style * style: add basic styles of table * style: add basic border styles of table * style: add more styles of table * style: add more styles of table * style: add pagination and summary styles * add more styles * style: add cell-ellipsis styles * style: add Radius style * style: add sorter style * style: add sorter style * style: add filter style * style: add filter style * style: add filter style * style: fix filter and sort style * style: fix bordered style * style: fix bordered style * style: fix bordered style * style: add size style * style: fix size style * style: add selection style * style: format code * style: add sticky code * style: add expand code * style: add expand code * style: add expand code * style: add fixed code * add fixed style * style: fix diff place * style: use number as px string * chore: improve function name * chore: use token * style: rtl styles * chore: fix marigin and padding logical properties * fix: rtl styles * fix: table filter dropdown style * chore: remove useStyle * chore: revert classNames * fix: test case * fix shadow in rtl * Apply suggestions from code review * chore: sub filter tree * style: fix tree dropdown padding Co-authored-by: zombiej <smith3816@gmail.com>
2022-05-31 10:10:35 +08:00
position: 'relative',
color: tableHeaderTextColor,
fontWeight: fontWeightStrong,
refactor: Table to CSS-IN-JS (#35584) * style: add basic styles of table * style: add basic border styles of table * style: add more styles of table * style: add more styles of table * style: add pagination and summary styles * add more styles * style: add cell-ellipsis styles * style: add Radius style * style: add basic styles of table * style: add basic border styles of table * style: add more styles of table * style: add more styles of table * style: add pagination and summary styles * add more styles * style: add cell-ellipsis styles * style: add Radius style * style: add sorter style * style: add sorter style * style: add filter style * style: add filter style * style: add filter style * style: fix filter and sort style * style: fix bordered style * style: fix bordered style * style: fix bordered style * style: add size style * style: fix size style * style: add selection style * style: format code * style: add sticky code * style: add expand code * style: add expand code * style: add expand code * style: add fixed code * add fixed style * style: fix diff place * style: use number as px string * chore: improve function name * chore: use token * style: rtl styles * chore: fix marigin and padding logical properties * fix: rtl styles * fix: table filter dropdown style * chore: remove useStyle * chore: revert classNames * fix: test case * fix shadow in rtl * Apply suggestions from code review * chore: sub filter tree * style: fix tree dropdown padding Co-authored-by: zombiej <smith3816@gmail.com>
2022-05-31 10:10:35 +08:00
textAlign: 'start',
background: tableHeaderBg,
refactor: Table to CSS-IN-JS (#35584) * style: add basic styles of table * style: add basic border styles of table * style: add more styles of table * style: add more styles of table * style: add pagination and summary styles * add more styles * style: add cell-ellipsis styles * style: add Radius style * style: add basic styles of table * style: add basic border styles of table * style: add more styles of table * style: add more styles of table * style: add pagination and summary styles * add more styles * style: add cell-ellipsis styles * style: add Radius style * style: add sorter style * style: add sorter style * style: add filter style * style: add filter style * style: add filter style * style: fix filter and sort style * style: fix bordered style * style: fix bordered style * style: fix bordered style * style: add size style * style: fix size style * style: add selection style * style: format code * style: add sticky code * style: add expand code * style: add expand code * style: add expand code * style: add fixed code * add fixed style * style: fix diff place * style: use number as px string * chore: improve function name * chore: use token * style: rtl styles * chore: fix marigin and padding logical properties * fix: rtl styles * fix: table filter dropdown style * chore: remove useStyle * chore: revert classNames * fix: test case * fix shadow in rtl * Apply suggestions from code review * chore: sub filter tree * style: fix tree dropdown padding Co-authored-by: zombiej <smith3816@gmail.com>
2022-05-31 10:10:35 +08:00
borderBottom: tableBorder,
transition: `background ${motionDurationMid} ease`,
refactor: Table to CSS-IN-JS (#35584) * style: add basic styles of table * style: add basic border styles of table * style: add more styles of table * style: add more styles of table * style: add pagination and summary styles * add more styles * style: add cell-ellipsis styles * style: add Radius style * style: add basic styles of table * style: add basic border styles of table * style: add more styles of table * style: add more styles of table * style: add pagination and summary styles * add more styles * style: add cell-ellipsis styles * style: add Radius style * style: add sorter style * style: add sorter style * style: add filter style * style: add filter style * style: add filter style * style: fix filter and sort style * style: fix bordered style * style: fix bordered style * style: fix bordered style * style: add size style * style: fix size style * style: add selection style * style: format code * style: add sticky code * style: add expand code * style: add expand code * style: add expand code * style: add fixed code * add fixed style * style: fix diff place * style: use number as px string * chore: improve function name * chore: use token * style: rtl styles * chore: fix marigin and padding logical properties * fix: rtl styles * fix: table filter dropdown style * chore: remove useStyle * chore: revert classNames * fix: test case * fix shadow in rtl * Apply suggestions from code review * chore: sub filter tree * style: fix tree dropdown padding Co-authored-by: zombiej <smith3816@gmail.com>
2022-05-31 10:10:35 +08:00
"&[colspan]:not([colspan='1'])": {
textAlign: 'center',
},
[`&:not(:last-child):not(${componentCls}-selection-column):not(${componentCls}-row-expand-icon-cell):not([colspan])::before`]:
{
position: 'absolute',
top: '50%',
insetInlineEnd: 0,
width: 1,
height: '1.6em',
backgroundColor: tableHeaderCellSplitColor,
refactor: Table to CSS-IN-JS (#35584) * style: add basic styles of table * style: add basic border styles of table * style: add more styles of table * style: add more styles of table * style: add pagination and summary styles * add more styles * style: add cell-ellipsis styles * style: add Radius style * style: add basic styles of table * style: add basic border styles of table * style: add more styles of table * style: add more styles of table * style: add pagination and summary styles * add more styles * style: add cell-ellipsis styles * style: add Radius style * style: add sorter style * style: add sorter style * style: add filter style * style: add filter style * style: add filter style * style: fix filter and sort style * style: fix bordered style * style: fix bordered style * style: fix bordered style * style: add size style * style: fix size style * style: add selection style * style: format code * style: add sticky code * style: add expand code * style: add expand code * style: add expand code * style: add fixed code * add fixed style * style: fix diff place * style: use number as px string * chore: improve function name * chore: use token * style: rtl styles * chore: fix marigin and padding logical properties * fix: rtl styles * fix: table filter dropdown style * chore: remove useStyle * chore: revert classNames * fix: test case * fix shadow in rtl * Apply suggestions from code review * chore: sub filter tree * style: fix tree dropdown padding Co-authored-by: zombiej <smith3816@gmail.com>
2022-05-31 10:10:35 +08:00
transform: 'translateY(-50%)',
transition: `background-color ${motionDurationMid}`,
refactor: Table to CSS-IN-JS (#35584) * style: add basic styles of table * style: add basic border styles of table * style: add more styles of table * style: add more styles of table * style: add pagination and summary styles * add more styles * style: add cell-ellipsis styles * style: add Radius style * style: add basic styles of table * style: add basic border styles of table * style: add more styles of table * style: add more styles of table * style: add pagination and summary styles * add more styles * style: add cell-ellipsis styles * style: add Radius style * style: add sorter style * style: add sorter style * style: add filter style * style: add filter style * style: add filter style * style: fix filter and sort style * style: fix bordered style * style: fix bordered style * style: fix bordered style * style: add size style * style: fix size style * style: add selection style * style: format code * style: add sticky code * style: add expand code * style: add expand code * style: add expand code * style: add fixed code * add fixed style * style: fix diff place * style: use number as px string * chore: improve function name * chore: use token * style: rtl styles * chore: fix marigin and padding logical properties * fix: rtl styles * fix: table filter dropdown style * chore: remove useStyle * chore: revert classNames * fix: test case * fix shadow in rtl * Apply suggestions from code review * chore: sub filter tree * style: fix tree dropdown padding Co-authored-by: zombiej <smith3816@gmail.com>
2022-05-31 10:10:35 +08:00
content: '""',
},
},
'> tr:not(:last-child) > th[colspan]': {
borderBottom: 0,
},
},
// ============================ Body ============================
[`${componentCls}-tbody`]: {
'> tr': {
'> th, > td': {
transition: `background ${motionDurationMid}, border-color ${motionDurationMid}`,
borderBottom: tableBorder,
refactor: Table to CSS-IN-JS (#35584) * style: add basic styles of table * style: add basic border styles of table * style: add more styles of table * style: add more styles of table * style: add pagination and summary styles * add more styles * style: add cell-ellipsis styles * style: add Radius style * style: add basic styles of table * style: add basic border styles of table * style: add more styles of table * style: add more styles of table * style: add pagination and summary styles * add more styles * style: add cell-ellipsis styles * style: add Radius style * style: add sorter style * style: add sorter style * style: add filter style * style: add filter style * style: add filter style * style: fix filter and sort style * style: fix bordered style * style: fix bordered style * style: fix bordered style * style: add size style * style: fix size style * style: add selection style * style: format code * style: add sticky code * style: add expand code * style: add expand code * style: add expand code * style: add fixed code * add fixed style * style: fix diff place * style: use number as px string * chore: improve function name * chore: use token * style: rtl styles * chore: fix marigin and padding logical properties * fix: rtl styles * fix: table filter dropdown style * chore: remove useStyle * chore: revert classNames * fix: test case * fix shadow in rtl * Apply suggestions from code review * chore: sub filter tree * style: fix tree dropdown padding Co-authored-by: zombiej <smith3816@gmail.com>
2022-05-31 10:10:35 +08:00
// ========================= Nest Table ===========================
[`
> ${componentCls}-wrapper:only-child,
> ${componentCls}-expanded-row-fixed > ${componentCls}-wrapper:only-child
`]: {
[componentCls]: {
marginBlock: unit(calc(tablePaddingVertical).mul(-1).equal()),
marginInline: `${unit(
calc(tableExpandColumnWidth).sub(tablePaddingHorizontal).equal(),
)}
${unit(calc(tablePaddingHorizontal).mul(-1).equal())}`,
refactor: Table to CSS-IN-JS (#35584) * style: add basic styles of table * style: add basic border styles of table * style: add more styles of table * style: add more styles of table * style: add pagination and summary styles * add more styles * style: add cell-ellipsis styles * style: add Radius style * style: add basic styles of table * style: add basic border styles of table * style: add more styles of table * style: add more styles of table * style: add pagination and summary styles * add more styles * style: add cell-ellipsis styles * style: add Radius style * style: add sorter style * style: add sorter style * style: add filter style * style: add filter style * style: add filter style * style: fix filter and sort style * style: fix bordered style * style: fix bordered style * style: fix bordered style * style: add size style * style: fix size style * style: add selection style * style: format code * style: add sticky code * style: add expand code * style: add expand code * style: add expand code * style: add fixed code * add fixed style * style: fix diff place * style: use number as px string * chore: improve function name * chore: use token * style: rtl styles * chore: fix marigin and padding logical properties * fix: rtl styles * fix: table filter dropdown style * chore: remove useStyle * chore: revert classNames * fix: test case * fix shadow in rtl * Apply suggestions from code review * chore: sub filter tree * style: fix tree dropdown padding Co-authored-by: zombiej <smith3816@gmail.com>
2022-05-31 10:10:35 +08:00
[`${componentCls}-tbody > tr:last-child > td`]: {
borderBottom: 0,
'&:first-child, &:last-child': {
borderRadius: 0,
},
},
},
},
},
'> th': {
position: 'relative',
color: tableHeaderTextColor,
fontWeight: fontWeightStrong,
textAlign: 'start',
background: tableHeaderBg,
borderBottom: tableBorder,
transition: `background ${motionDurationMid} ease`,
},
refactor: Table to CSS-IN-JS (#35584) * style: add basic styles of table * style: add basic border styles of table * style: add more styles of table * style: add more styles of table * style: add pagination and summary styles * add more styles * style: add cell-ellipsis styles * style: add Radius style * style: add basic styles of table * style: add basic border styles of table * style: add more styles of table * style: add more styles of table * style: add pagination and summary styles * add more styles * style: add cell-ellipsis styles * style: add Radius style * style: add sorter style * style: add sorter style * style: add filter style * style: add filter style * style: add filter style * style: fix filter and sort style * style: fix bordered style * style: fix bordered style * style: fix bordered style * style: add size style * style: fix size style * style: add selection style * style: format code * style: add sticky code * style: add expand code * style: add expand code * style: add expand code * style: add fixed code * add fixed style * style: fix diff place * style: use number as px string * chore: improve function name * chore: use token * style: rtl styles * chore: fix marigin and padding logical properties * fix: rtl styles * fix: table filter dropdown style * chore: remove useStyle * chore: revert classNames * fix: test case * fix shadow in rtl * Apply suggestions from code review * chore: sub filter tree * style: fix tree dropdown padding Co-authored-by: zombiej <smith3816@gmail.com>
2022-05-31 10:10:35 +08:00
},
},
// ============================ Footer ============================
[`${componentCls}-footer`]: {
padding: `${unit(tablePaddingVertical)} ${unit(tablePaddingHorizontal)}`,
color: tableFooterTextColor,
background: tableFooterBg,
refactor: Table to CSS-IN-JS (#35584) * style: add basic styles of table * style: add basic border styles of table * style: add more styles of table * style: add more styles of table * style: add pagination and summary styles * add more styles * style: add cell-ellipsis styles * style: add Radius style * style: add basic styles of table * style: add basic border styles of table * style: add more styles of table * style: add more styles of table * style: add pagination and summary styles * add more styles * style: add cell-ellipsis styles * style: add Radius style * style: add sorter style * style: add sorter style * style: add filter style * style: add filter style * style: add filter style * style: fix filter and sort style * style: fix bordered style * style: fix bordered style * style: fix bordered style * style: add size style * style: fix size style * style: add selection style * style: format code * style: add sticky code * style: add expand code * style: add expand code * style: add expand code * style: add fixed code * add fixed style * style: fix diff place * style: use number as px string * chore: improve function name * chore: use token * style: rtl styles * chore: fix marigin and padding logical properties * fix: rtl styles * fix: table filter dropdown style * chore: remove useStyle * chore: revert classNames * fix: test case * fix shadow in rtl * Apply suggestions from code review * chore: sub filter tree * style: fix tree dropdown padding Co-authored-by: zombiej <smith3816@gmail.com>
2022-05-31 10:10:35 +08:00
},
},
};
};
export const prepareComponentToken: GetDefaultToken<'Table'> = (token) => {
const {
colorFillAlter,
colorBgContainer,
colorTextHeading,
colorFillSecondary,
colorFillContent,
controlItemBgActive,
controlItemBgActiveHover,
padding,
paddingSM,
paddingXS,
colorBorderSecondary,
borderRadiusLG,
controlHeight,
colorTextPlaceholder,
fontSize,
fontSizeSM,
lineHeight,
lineWidth,
colorIcon,
colorIconHover,
opacityLoading,
controlInteractiveSize,
} = token;
const colorFillSecondarySolid = new TinyColor(colorFillSecondary)
.onBackground(colorBgContainer)
.toHexShortString();
const colorFillContentSolid = new TinyColor(colorFillContent)
.onBackground(colorBgContainer)
.toHexShortString();
const colorFillAlterSolid = new TinyColor(colorFillAlter)
.onBackground(colorBgContainer)
.toHexShortString();
const baseColorAction = new TinyColor(colorIcon);
const baseColorActionHover = new TinyColor(colorIconHover);
const expandIconHalfInner = controlInteractiveSize / 2 - lineWidth;
const expandIconSize = expandIconHalfInner * 2 + lineWidth * 3;
return {
headerBg: colorFillAlterSolid,
headerColor: colorTextHeading,
headerSortActiveBg: colorFillSecondarySolid,
headerSortHoverBg: colorFillContentSolid,
bodySortBg: colorFillAlterSolid,
rowHoverBg: colorFillAlterSolid,
rowSelectedBg: controlItemBgActive,
rowSelectedHoverBg: controlItemBgActiveHover,
rowExpandedBg: colorFillAlter,
cellPaddingBlock: padding,
cellPaddingInline: padding,
cellPaddingBlockMD: paddingSM,
cellPaddingInlineMD: paddingXS,
cellPaddingBlockSM: paddingXS,
cellPaddingInlineSM: paddingXS,
borderColor: colorBorderSecondary,
headerBorderRadius: borderRadiusLG,
footerBg: colorFillAlterSolid,
footerColor: colorTextHeading,
cellFontSize: fontSize,
cellFontSizeMD: fontSize,
cellFontSizeSM: fontSize,
headerSplitColor: colorBorderSecondary,
fixedHeaderSortActiveBg: colorFillSecondarySolid,
headerFilterHoverBg: colorFillContent,
filterDropdownMenuBg: colorBgContainer,
filterDropdownBg: colorBgContainer,
expandIconBg: colorBgContainer,
selectionColumnWidth: controlHeight,
stickyScrollBarBg: colorTextPlaceholder,
stickyScrollBarBorderRadius: 100,
expandIconMarginTop:
(fontSize * lineHeight - lineWidth * 3) / 2 -
Math.ceil((fontSizeSM * 1.4 - lineWidth * 3) / 2),
headerIconColor: baseColorAction
.clone()
.setAlpha(baseColorAction.getAlpha() * opacityLoading)
.toRgbString(),
headerIconHoverColor: baseColorActionHover
.clone()
.setAlpha(baseColorActionHover.getAlpha() * opacityLoading)
.toRgbString(),
expandIconHalfInner,
expandIconSize,
expandIconScale: controlInteractiveSize / expandIconSize,
};
};
const zIndexTableFixed = 2;
refactor: Table to CSS-IN-JS (#35584) * style: add basic styles of table * style: add basic border styles of table * style: add more styles of table * style: add more styles of table * style: add pagination and summary styles * add more styles * style: add cell-ellipsis styles * style: add Radius style * style: add basic styles of table * style: add basic border styles of table * style: add more styles of table * style: add more styles of table * style: add pagination and summary styles * add more styles * style: add cell-ellipsis styles * style: add Radius style * style: add sorter style * style: add sorter style * style: add filter style * style: add filter style * style: add filter style * style: fix filter and sort style * style: fix bordered style * style: fix bordered style * style: fix bordered style * style: add size style * style: fix size style * style: add selection style * style: format code * style: add sticky code * style: add expand code * style: add expand code * style: add expand code * style: add fixed code * add fixed style * style: fix diff place * style: use number as px string * chore: improve function name * chore: use token * style: rtl styles * chore: fix marigin and padding logical properties * fix: rtl styles * fix: table filter dropdown style * chore: remove useStyle * chore: revert classNames * fix: test case * fix shadow in rtl * Apply suggestions from code review * chore: sub filter tree * style: fix tree dropdown padding Co-authored-by: zombiej <smith3816@gmail.com>
2022-05-31 10:10:35 +08:00
// ============================== Export ==============================
export default genStyleHooks(
'Table',
(token) => {
const {
colorTextHeading,
colorSplit,
colorBgContainer,
controlInteractiveSize: checkboxSize,
headerBg,
headerColor,
headerSortActiveBg,
headerSortHoverBg,
bodySortBg,
rowHoverBg,
rowSelectedBg,
rowSelectedHoverBg,
rowExpandedBg,
cellPaddingBlock,
cellPaddingInline,
cellPaddingBlockMD,
cellPaddingInlineMD,
cellPaddingBlockSM,
cellPaddingInlineSM,
borderColor,
footerBg,
footerColor,
headerBorderRadius,
cellFontSize,
cellFontSizeMD,
cellFontSizeSM,
headerSplitColor,
fixedHeaderSortActiveBg,
headerFilterHoverBg,
filterDropdownBg,
expandIconBg,
selectionColumnWidth,
stickyScrollBarBg,
calc,
} = token;
const tableToken = mergeToken<TableToken>(token, {
tableFontSize: cellFontSize,
tableBg: colorBgContainer,
tableRadius: headerBorderRadius,
tablePaddingVertical: cellPaddingBlock,
tablePaddingHorizontal: cellPaddingInline,
tablePaddingVerticalMiddle: cellPaddingBlockMD,
tablePaddingHorizontalMiddle: cellPaddingInlineMD,
tablePaddingVerticalSmall: cellPaddingBlockSM,
tablePaddingHorizontalSmall: cellPaddingInlineSM,
tableBorderColor: borderColor,
tableHeaderTextColor: headerColor,
tableHeaderBg: headerBg,
tableFooterTextColor: footerColor,
tableFooterBg: footerBg,
tableHeaderCellSplitColor: headerSplitColor,
tableHeaderSortBg: headerSortActiveBg,
tableHeaderSortHoverBg: headerSortHoverBg,
tableBodySortBg: bodySortBg,
tableFixedHeaderSortActiveBg: fixedHeaderSortActiveBg,
tableHeaderFilterActiveBg: headerFilterHoverBg,
tableFilterDropdownBg: filterDropdownBg,
tableRowHoverBg: rowHoverBg,
tableSelectedRowBg: rowSelectedBg,
tableSelectedRowHoverBg: rowSelectedHoverBg,
zIndexTableFixed,
zIndexTableSticky: calc(zIndexTableFixed).add(1).equal({ unit: false }),
tableFontSizeMiddle: cellFontSizeMD,
tableFontSizeSmall: cellFontSizeSM,
tableSelectionColumnWidth: selectionColumnWidth,
tableExpandIconBg: expandIconBg,
tableExpandColumnWidth: calc(checkboxSize).add(calc(token.padding).mul(2)).equal(),
tableExpandedRowBg: rowExpandedBg,
// Dropdown
tableFilterDropdownWidth: 120,
tableFilterDropdownHeight: 264,
tableFilterDropdownSearchWidth: 140,
// Virtual Scroll Bar
tableScrollThumbSize: 8, // Mac scroll bar size
tableScrollThumbBg: stickyScrollBarBg,
tableScrollThumbBgHover: colorTextHeading,
tableScrollBg: colorSplit,
});
return [
genTableStyle(tableToken),
genPaginationStyle(tableToken),
genSummaryStyle(tableToken),
genSorterStyle(tableToken),
genFilterStyle(tableToken),
genBorderedStyle(tableToken),
genRadiusStyle(tableToken),
genExpandStyle(tableToken),
genSummaryStyle(tableToken),
genEmptyStyle(tableToken),
genSelectionStyle(tableToken),
genFixedStyle(tableToken),
genStickyStyle(tableToken),
genEllipsisStyle(tableToken),
genSizeStyle(tableToken),
genRtlStyle(tableToken),
genVirtualStyle(tableToken),
];
},
prepareComponentToken,
{
unitless: {
expandIconScale: true,
},
},
);