diff --git a/components/table/style/index.less b/components/table/style/index.less index 2ad26d5e..6ecfb55e 100644 --- a/components/table/style/index.less +++ b/components/table/style/index.less @@ -16,39 +16,44 @@ .text(); overflow: hidden; background-color: var(--f-white); - &, * { + + &, + * { box-sizing: border-box; } - .hidden-columns{ + + .hidden-columns { display: none; } + & &-header-wrapper, - & &-body-wrapper{ + & &-body-wrapper { width: 100%; height: auto; overflow: hidden; scrollbar-width: none; - &::-webkit-scrollbar { - display: none; - } - } - & &-header-wrapper, - & &-body-wrapper { + &.is-scrolling-x-left, &.is-scrolling-x-middle { .@{table-prefix}-fixed-right.is-first { box-shadow: -1px 2px var(--f-shadow-radius-sm) var(--f-shadow-color-sm); } } + &.is-scrolling-x-right, &.is-scrolling-x-middle { .@{table-prefix}-fixed-left.is-last { box-shadow: 2px 2px var(--f-shadow-radius-sm) -1px var(--f-shadow-color-sm); } } + + &::-webkit-scrollbar { + display: none; + } } + & &-header, - & &-body{ + & &-body { display: table; margin: 0; padding: 0; @@ -56,38 +61,58 @@ border: 0; border-collapse: separate; border-spacing: 0; + .@{table-prefix}-row { box-sizing: border-box; border: none; + + &.is-opened { + .@{table-prefix}-expand-icon { + transform: rotate(0); + } + + &+.@{table-prefix}-tr { + .@{table-prefix}-td { + background-color: var(--f-component-bg-color); + } + } + } } - .@{table-prefix}-th, .@{table-prefix}-td { + + .@{table-prefix}-th, + .@{table-prefix}-td { position: relative; min-width: 0; margin: 0; padding: 0; background-color: var(--f-white); border: none; + &.@{table-prefix}-fixed-left { position: sticky; left: 0; z-index: 2; } + &.@{table-prefix}-fixed-right { position: sticky; right: 0; z-index: 2; } } + .@{table-prefix}-th { font-weight: @font-weight-medium; background-color: var(--f-component-bg-color); } + .@{table-prefix}-td { background-color: var(--f-white); - border-bottom: @table-border; + &.@{table-prefix}-no-data { text-align: center; } + &.@{table-prefix}-cell { overflow: hidden; white-space: normal; @@ -95,55 +120,24 @@ } } } - & &-body{ - .@{table-prefix}-row.is-opened{ - .@{table-prefix}-td { - border-bottom: none; - } - .@{table-prefix}-expand-icon { - transform: rotate(0); - } - & + .@{table-prefix}-tr { - .@{table-prefix}-td { - background-color: var(--f-component-bg-color); - } - } - } + + &.is-bordered { + border: @table-border; } - &.is-bordered{ - border: @table-border; - .@{table-prefix}-header { - .@{table-prefix}-th { - border-bottom: @table-border; - border-right: @table-border; - } - thead .@{table-prefix}-row { - .@{table-prefix}-th { - &:last-child { - border-right: none; - } - } - } + + &.is-horizontal-line { + .@{table-prefix}-td, .@{table-prefix}-th { + border-bottom: @table-border; } - .@{table-prefix}-body { - .@{table-prefix}-th, - .@{table-prefix}-td { - border-right: @table-border; - } - thead .@{table-prefix}-row { - .@{table-prefix}-th { - border-bottom: @table-border; - &:last-child { - border-right: none; - } + .@{table-prefix}-row { + &.is-opened { + .@{table-prefix}-td { + border-bottom: none; } } + } + &.is-bordered { tbody .@{table-prefix}-row { - .@{table-prefix}-td { - &:last-child { - border-right: none; - } - } &:last-child { .@{table-prefix}-td { border-bottom: none; @@ -152,22 +146,43 @@ } } } + + &.is-vertical-line { + .@{table-prefix}-th, + .@{table-prefix}-td { + border-right: @table-border; + } + + .@{table-prefix}-row { + .@{table-prefix}-td, + .@{table-prefix}-th { + &:last-child { + border-right: none; + } + } + } + } + &.is-size-middle { .@{table-prefix}-cell { padding: @padding-md; + &.@{table-prefix}-expanded-cell { padding: 0; } } } + &.is-size-small { .@{table-prefix}-cell { padding: @padding-xs; + &.@{table-prefix}-expanded-cell { padding: 0; } } } + &-expand-icon { color: var(--f-text-color); font-size: @font-size-head; @@ -175,11 +190,13 @@ cursor: pointer; transition: all @animation-duration-base @ease-in-out; } + &-center { display: flex; align-items: center; } - & &-sorter{ + + & &-sorter { margin-top: -0.2em; margin-left: @padding-sm; vertical-align: middle; @@ -187,29 +204,34 @@ flex-direction: column; align-items: center; justify-content: center; - .@{table-prefix}-sorter-up{ + + .@{table-prefix}-sorter-up { width: 0; height: 0; border-bottom: 4px solid var(--f-disabled-color-base); border-right: 4px solid transparent; border-left: 4px solid transparent; + &.is-active { border-bottom-color: var(--f-primary-color); } } - .@{table-prefix}-sorter-down{ + + .@{table-prefix}-sorter-down { margin-top: calc(@padding-xs / 4); width: 0; height: 0; border-top: 4px solid var(--f-disabled-color-base); border-right: 4px solid transparent; border-left: 4px solid transparent; + &.is-active { border-top-color: var(--f-primary-color); } } } + & &-th-sortable { cursor: pointer; } -} +} \ No newline at end of file diff --git a/components/table/table.tsx b/components/table/table.tsx index 2b73b9b4..e9599c2d 100644 --- a/components/table/table.tsx +++ b/components/table/table.tsx @@ -89,6 +89,14 @@ const tableProps = { return []; }, }, + horizontalLine: { + type: Boolean, + default: true, + }, + verticalLine: { + type: Boolean, + default: false, + }, } as const; export type TableProps = Partial>; diff --git a/components/table/useTableStyle.ts b/components/table/useTableStyle.ts index 6dc3fd0b..8448452a 100644 --- a/components/table/useTableStyle.ts +++ b/components/table/useTableStyle.ts @@ -33,6 +33,8 @@ export default ({ prefixCls, props.bordered && 'is-bordered', props.size && `is-size-${props.size}`, + props.horizontalLine && 'is-horizontal-line', + props.verticalLine && 'is-vertical-line', ] .filter(Boolean) .join(' '), diff --git a/docs/.vitepress/components/table/header.vue b/docs/.vitepress/components/table/header.vue index 0930f2b2..d9b788b7 100644 --- a/docs/.vitepress/components/table/header.vue +++ b/docs/.vitepress/components/table/header.vue @@ -1,9 +1,9 @@