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 {