diff --git a/components/table/demo/dynamic-settings.md b/components/table/demo/dynamic-settings.md index 40908f4b53..ae8b596f3b 100644 --- a/components/table/demo/dynamic-settings.md +++ b/components/table/demo/dynamic-settings.md @@ -21,11 +21,13 @@ const columns = [{ title: 'Name', dataIndex: 'name', key: 'name', + width: 150, render: text => {text}, }, { title: 'Age', dataIndex: 'age', key: 'age', + width: 100, }, { title: 'Address', dataIndex: 'address', @@ -33,6 +35,7 @@ const columns = [{ }, { title: 'Action', key: 'action', + width: 400, render: (text, record) => ( Action δΈ€ {record.name} @@ -46,29 +49,21 @@ const columns = [{ ), }]; -const data = [{ - key: '1', - name: 'John Brown', - age: 32, - address: 'New York No. 1 Lake Park', - description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.', -}, { - key: '2', - name: 'Jim Green', - age: 42, - address: 'London No. 1 Lake Park', - description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.', -}, { - key: '3', - name: 'Joe Black', - age: 32, - address: 'Sidney No. 1 Lake Park', - description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.', -}]; +const data = []; +for (let i = 1; i <= 10; i++) { + data.push({ + key: i, + name: 'John Brown', + age: `${i}2`, + address: `New York No. ${i} Lake Park`, + description: `My name is John Brown, I am ${i}2 years old, living in New York No. ${i} Lake Park.`, + }); +} const expandedRowRender = record =>

{record.description}

; const title = () => 'Here is title'; const footer = () => 'Here is footer'; +const scroll = { y: 240 }; class Demo extends React.Component { state = { @@ -79,6 +74,8 @@ class Demo extends React.Component { expandedRowRender, title, footer, + rowSelection: {}, + scroll, } handleToggle = (prop) => { @@ -103,6 +100,14 @@ class Demo extends React.Component { this.setState({ footer: enable ? footer : undefined }); } + handleRowSelectionChange = (enable) => { + this.setState({ rowSelection: enable ? {} : undefined }); + } + + handleScollChange = (enable) => { + this.setState({ scroll: enable ? scroll : undefined }); + } + render() { const state = this.state; return ( @@ -127,6 +132,12 @@ class Demo extends React.Component { + + + + + + Default diff --git a/components/table/style/index.less b/components/table/style/index.less index 3d253294a4..c80bc879f2 100644 --- a/components/table/style/index.less +++ b/components/table/style/index.less @@ -165,10 +165,6 @@ padding: 0 8px; } - &.@{table-prefix-cls}-bordered .@{table-prefix-cls}-body > table { - border: 0; - } - .@{table-prefix-cls}-thead > tr > th { padding: 10px 8px; background: #fff; @@ -192,6 +188,11 @@ .@{table-prefix-cls}-row:last-child td { border-bottom: 0; } + + .@{table-prefix-cls}-title, + .@{table-prefix-cls}-footer { + top: 0; + } } &-column-sorter { @@ -283,6 +284,25 @@ border-right: 0; } } + + &.@{table-prefix-cls}-small { + .@{table-prefix-cls}-header > table, + .@{table-prefix-cls}-body > table, + .@{table-prefix-cls}-fixed-left table, + .@{table-prefix-cls}-fixed-right table { + border: 0; + } + + .@{table-prefix-cls}-title { + border: 0; + border-bottom: 1px solid @border-color-split; + } + + .@{table-prefix-cls}-footer { + border: 0; + border-top: 1px solid @border-color-split; + } + } } &-placeholder {