fix(scrollbar): enhanced verification of the number of columns (#275)

* fix(scrollbar): enhanced verification of the number of columns * fix(colums): support React.Fragment * docs: update examples
rsuite · Nov 25, 2021 · a666996 · a666996
1 parent 58436e4
commit a666996
Show file tree

Hide file tree

Showing 12 changed files with 337 additions and 172 deletions.
diff --git a/docs/index.tsx b/docs/index.tsx
@@ -134,6 +134,10 @@ function App() {
             title: 'Column Group',
             content: require('./md/ColumnGroupTable.md')
           },
+          {
+            title: 'Custom Columns',
+            content: require('./md/CustomColumns.md')
+          },
 
           {
             title: 'Hidden header',

diff --git a/docs/md/ColumnGroupTable.md b/docs/md/ColumnGroupTable.md
@@ -3,7 +3,7 @@
 <!--start-code-->
 
 ```js
-const FixedColumnTable = () => {
+const App = () => {
   const [sortColumn, setSortColumn] = React.useState('id');
   const [sortType, setSortType] = React.useState('asc');
 
@@ -79,21 +79,7 @@ const FixedColumnTable = () => {
   );
 };
 
-ReactDOM.render(<FixedColumnTable />);
+ReactDOM.render(<App />);
 ```
 
 <!--end-code-->
-
-In some cases, you need to merge the relationships between columns to organize your data, and you can set a ColSpan attribute on the `<Column>` component, for example:
-
-```html
-<Column width="{130}" colSpan="{2}">
-  <HeaderCell>Name</HeaderCell>
-  <Cell dataKey="firstName" />
-</Column>
-
-<Column width="{130}">
-  <HeaderCell />
-  <Cell dataKey="lastName" />
-</Column>
-```
diff --git a/docs/md/CustomColumnTable.md b/docs/md/CustomColumnTable.md
@@ -74,13 +74,12 @@ const ActionCell = ({ rowData, dataKey, ...props }) => {
   );
 };
 
-const data = [...fakeData, ...fakeData, ...fakeData, ...fakeData, ...fakeData];
+const data = [...fakeData];
 const App = () => {
   const [checkedKeys, setCheckedKeys] = React.useState([]);
 
   const handleCheckAll = event => {
     const checked = event.target.checked;
-
     const keys = checked ? data.map(item => item.id) : [];
 
     console.log(checked, keys);
@@ -91,11 +90,13 @@ const App = () => {
     const value = +event.target.value;
     const keys = checked ? [...checkedKeys, value] : checkedKeys.filter(item => item !== value);
 
+    console.log(checked, value, keys);
+
     setCheckedKeys(keys);
   };
 
   return (
-    <Table height={400} data={fakeLargeData} headerHeight={50} virtualized>
+    <Table height={400} data={data} headerHeight={50} virtualized>
       <Column width={50} align="center">
         <HeaderCell style={{ padding: 0 }}>
           <div style={{ lineHeight: '40px' }}>

diff --git a/docs/md/CustomColumns.md b/docs/md/CustomColumns.md
@@ -0,0 +1,83 @@
+### Custom Columns
+
+<!--start-code-->
+
+```js
+const App = () => {
+  const [showColumns, setShowColumns] = React.useState(false);
+
+  return (
+    <Table
+      classPrefix="rs-table"
+      bordered
+      height={400}
+      headerHeight={100}
+      data={fakeDataForColSpan}
+    >
+      <Column width={70} align="center" verticalAlign="middle" sortable>
+        <HeaderCell>Id</HeaderCell>
+        <Cell dataKey="id" />
+      </Column>
+
+      <ColumnGroup
+        header={'Basic Info'}
+        align="center"
+        verticalAlign="middle"
+        groupHeaderHeight={40}
+      >
+        <React.Fragment>
+          <Column width={120} resizable sortable>
+            <HeaderCell>firstName</HeaderCell>
+            <Cell dataKey="firstName" />
+          </Column>
+
+          <Column width={120} resizable sortable>
+            <HeaderCell>lastName</HeaderCell>
+            <Cell dataKey="lastName" />
+          </Column>
+        </React.Fragment>
+
+        {showColumns ? (
+          <Column width={200} resizable sortable>
+            <HeaderCell>Email</HeaderCell>
+            <Cell dataKey="email" />
+          </Column>
+        ) : null}
+      </ColumnGroup>
+
+      <React.Fragment>
+        <Column width={200} verticalAlign="middle" sortable>
+          <HeaderCell>Company Name</HeaderCell>
+          <Cell dataKey="companyName" />
+        </Column>
+
+        <Column width={200} verticalAlign="middle" sortable>
+          <HeaderCell>Company Name</HeaderCell>
+          <Cell dataKey="companyName" />
+        </Column>
+      </React.Fragment>
+
+      <Column width={200} verticalAlign="middle" sortable>
+        <HeaderCell>Company Name</HeaderCell>
+        <Cell dataKey="companyName" />
+      </Column>
+
+      <Column width={100} resizable colSpan={2} verticalAlign="middle" sortable>
+        <HeaderCell>City</HeaderCell>
+        <Cell dataKey="city" />
+      </Column>
+
+      {showColumns ? (
+        <Column width={100} resizable sortable>
+          <HeaderCell>Street</HeaderCell>
+          <Cell dataKey="street" />
+        </Column>
+      ) : null}
+    </Table>
+  );
+};
+
+ReactDOM.render(<App />);
+```
+
+<!--end-code-->
diff --git a/docs/md/EmptyDataTable.md b/docs/md/EmptyDataTable.md
@@ -3,72 +3,68 @@
 <!--start-code-->
 
 ```js
-class EmptyDataTable extends React.Component {
-  render() {
-    return (
-      <div>
-        <Table
-          height={400}
-          data={[]}
-          renderEmpty={() => {
-            return <div className="rs-table-body-info">No data found / 数据为空 </div>;
-          }}
-        >
-          <Column width={70} align="center" fixed>
-            <HeaderCell>Id</HeaderCell>
-            <Cell dataKey="id" />
-          </Column>
+const App = () => {
+  return (
+    <Table
+      height={400}
+      data={[]}
+      renderEmpty={() => {
+        return <div className="rs-table-body-info">No data found / 数据为空 </div>;
+      }}
+    >
+      <Column width={70} align="center" fixed>
+        <HeaderCell>Id</HeaderCell>
+        <Cell dataKey="id" />
+      </Column>
 
-          <Column width={130} fixed>
-            <HeaderCell>First Name</HeaderCell>
-            <Cell dataKey="firstName" />
-          </Column>
+      <Column width={130} fixed>
+        <HeaderCell>First Name</HeaderCell>
+        <Cell dataKey="firstName" />
+      </Column>
 
-          <Column width={130}>
-            <HeaderCell>Last Name</HeaderCell>
-            <Cell dataKey="lastName" />
-          </Column>
+      <Column width={130}>
+        <HeaderCell>Last Name</HeaderCell>
+        <Cell dataKey="lastName" />
+      </Column>
 
-          <Column width={200}>
-            <HeaderCell>City</HeaderCell>
-            <Cell dataKey="city" />
-          </Column>
+      <Column width={200}>
+        <HeaderCell>City</HeaderCell>
+        <Cell dataKey="city" />
+      </Column>
 
-          <Column width={200}>
-            <HeaderCell>Street</HeaderCell>
-            <Cell dataKey="street" />
-          </Column>
+      <Column width={200}>
+        <HeaderCell>Street</HeaderCell>
+        <Cell dataKey="street" />
+      </Column>
 
-          <Column width={200}>
-            <HeaderCell>Company Name</HeaderCell>
-            <Cell dataKey="companyName" />
-          </Column>
+      <Column width={200}>
+        <HeaderCell>Company Name</HeaderCell>
+        <Cell dataKey="companyName" />
+      </Column>
 
-          <Column width={200}>
-            <HeaderCell>Email</HeaderCell>
-            <Cell dataKey="email" />
-          </Column>
+      <Column width={200}>
+        <HeaderCell>Email</HeaderCell>
+        <Cell dataKey="email" />
+      </Column>
 
-          <Column width={200}>
-            <HeaderCell>Email</HeaderCell>
-            <Cell dataKey="email" />
-          </Column>
+      <Column width={200}>
+        <HeaderCell>Email</HeaderCell>
+        <Cell dataKey="email" />
+      </Column>
 
-          <Column width={200}>
-            <HeaderCell>Email</HeaderCell>
-            <Cell dataKey="email" />
-          </Column>
+      <Column width={200}>
+        <HeaderCell>Email</HeaderCell>
+        <Cell dataKey="email" />
+      </Column>
 
-          <Column width={200}>
-            <HeaderCell>Email</HeaderCell>
-            <Cell dataKey="email" />
-          </Column>
-        </Table>
-      </div>
-    );
-  }
-}
-ReactDOM.render(<EmptyDataTable />);
+      <Column width={200}>
+        <HeaderCell>Email</HeaderCell>
+        <Cell dataKey="email" />
+      </Column>
+    </Table>
+  );
+};
+ReactDOM.render(<App />);
 ```
 
 <!--end-code-->