diff --git a/cypress/e2e/table.spec.js b/cypress/e2e/table.spec.js index 633e9964b5..2ca4e189eb 100644 --- a/cypress/e2e/table.spec.js +++ b/cypress/e2e/table.spec.js @@ -219,4 +219,14 @@ describe('table', () => { cy.get('.semi-table-pagination-info').should('contain.text', '显示第 41 条-第 46 条,共 46 条') cy.get('.semi-page-item-active').eq(0).should('contain.text', '5'); }) + + it('test virtualized showHeader false', () => { + cy.visit('http://localhost:6006/iframe.html?args=&id=table--show-header&viewMode=story'); + cy.get('.semi-table-header').should('have.length', 1); + cy.window().then(window => { + const header = window.document.querySelector('.semi-table-header'); + const style = window.getComputedStyle(header); + expect(style.height).eq('0px'); + }); + }) }); \ No newline at end of file diff --git a/packages/semi-foundation/table/table.scss b/packages/semi-foundation/table/table.scss index 45aa07e0cd..70fa6b0527 100644 --- a/packages/semi-foundation/table/table.scss +++ b/packages/semi-foundation/table/table.scss @@ -81,6 +81,10 @@ $module: #{$prefix}-table; background-color: $color-table-bg-default; } } + + &-hidden { + height: 0; + } } &-align-center { diff --git a/packages/semi-ui/table/HeadTable.tsx b/packages/semi-ui/table/HeadTable.tsx index 2757adc3e2..85d06268da 100644 --- a/packages/semi-ui/table/HeadTable.tsx +++ b/packages/semi-ui/table/HeadTable.tsx @@ -73,10 +73,6 @@ class HeadTable extends React.PureComponent { sticky } = this.props; - if (!showHeader) { - return null; - } - const Table = get(components, 'header.outer', 'table') as unknown as typeof React.Component; const x = get(scroll, 'x'); const headStyle: Partial = {}; @@ -97,6 +93,7 @@ class HeadTable extends React.PureComponent { const headTableCls = classnames(`${prefixCls}-header`, { [`${prefixCls}-header-sticky`]: sticky, + [`${prefixCls}-header-hidden`]: !showHeader, }); const stickyTop = get(sticky, 'top', 0); diff --git a/packages/semi-ui/table/__test__/table.test.js b/packages/semi-ui/table/__test__/table.test.js index 4f601b5d7e..a97da00dd6 100644 --- a/packages/semi-ui/table/__test__/table.test.js +++ b/packages/semi-ui/table/__test__/table.test.js @@ -1102,7 +1102,6 @@ describe(`Table`, () => { demo.setProps({ showHeader: false, }); - expect(demo.find('.semi-table-thead').length).toEqual(0); // jsx column const jsxColumns = getJSXColumns(); const demo1 = mount({jsxColumns}
); diff --git a/packages/semi-ui/table/_story/table.stories.jsx b/packages/semi-ui/table/_story/table.stories.jsx index c653cab525..dde9ab4a6e 100644 --- a/packages/semi-ui/table/_story/table.stories.jsx +++ b/packages/semi-ui/table/_story/table.stories.jsx @@ -103,7 +103,8 @@ export { ColumnResize, FixedResizableRowSelection, SorterSortOrder, - FixedPagination + FixedPagination, + ShowHeader } from './v2'; export { default as FixSelectAll325 } from './Demos/rowSelection'; @@ -625,3 +626,6 @@ PerfRenderDemo.parameters = { export const RenderPaginationDemo = () => ; export const HugeDataDemo = ()=> +HugeDataDemo.parameters = { + chromatic: { disableSnapshot: true }, +}; diff --git a/packages/semi-ui/table/_story/v2/ShowHeader/index.tsx b/packages/semi-ui/table/_story/v2/ShowHeader/index.tsx new file mode 100644 index 0000000000..902edb7fed --- /dev/null +++ b/packages/semi-ui/table/_story/v2/ShowHeader/index.tsx @@ -0,0 +1,99 @@ +import React from 'react'; +import { Table, Avatar } from '@douyinfe/semi-ui'; +import * as dateFns from 'date-fns'; + +export default function App() { + const scroll = { y: 400, x: 900 }; + const style = { width: 750, margin: '0 auto' }; + const DAY = 24 * 60 * 60 * 1000; + + const columns = [ + { + title: '标题', + dataIndex: 'name', + width: 200, + fixed: true, + render: (text, record, index) => { + return ( +
+ {text} +
+ ); + }, + filters: [ + { + text: 'Semi Design 设计稿', + value: 'Semi Design 设计稿', + }, + { + text: 'Semi Pro 设计稿', + value: 'Semi Pro 设计稿', + }, + ], + onFilter: (value, record) => record.name.includes(value), + }, + { + title: '大小', + dataIndex: 'size', + width: 150, + sorter: (a, b) => a.size - b.size > 0 ? 1 : -1, + render: (text) => `${text} KB` + }, + { + title: '所有者', + dataIndex: 'owner', + render: (text, record, index) => { + return ( +
+ {typeof text === 'string' && text.slice(0, 1)} + {text} +
+ ); + } + + }, + { + title: '更新日期', + dataIndex: 'updateTime', + fixed: 'right', + width: 150, + sorter: (a, b) => a.updateTime - b.updateTime > 0 ? 1 : -1, + render: (value) => { + return dateFns.format(new Date(value), 'yyyy-MM-dd'); + } + } + ]; + + const getData = () => { + const data = []; + for (let i = 0; i < 1000; i++) { + const isSemiDesign = i % 2 === 0; + const randomNumber = (i * 1000) % 199; + data.push({ + key: '' + i, + name: isSemiDesign ? `Semi Design 设计稿${i}.fig` : `Semi Pro 设计稿${i}.fig`, + owner: isSemiDesign ? '姜鹏志' : '郝宣', + size: randomNumber, + updateTime: new Date().valueOf() + randomNumber * DAY, + avatarBg: isSemiDesign ? 'grey' : 'red' + }); + } + return data; + }; + + const data = getData(); + + return ( + <> + + + ); +} \ No newline at end of file diff --git a/packages/semi-ui/table/_story/v2/index.js b/packages/semi-ui/table/_story/v2/index.js index 06dd0e3102..02cd3e6afa 100644 --- a/packages/semi-ui/table/_story/v2/index.js +++ b/packages/semi-ui/table/_story/v2/index.js @@ -24,3 +24,4 @@ export { default as ColumnResize } from './ColumnResize'; export { default as FixedResizableRowSelection } from './FixedResizableRowSelection'; export { default as SorterSortOrder } from './SorterSortOrder'; export { default as FixedPagination } from './FixedPagination'; +export { default as ShowHeader } from './ShowHeader';