Example for responsive table changed ( Fixing issue #5313) (#5314)

react-bootstrap · Jul 21, 2020 · 26ee2b9 · 26ee2b9
1 parent 3960106
commit 26ee2b9
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 25 deletions.
diff --git a/www/src/examples/Table/Responsive.js b/www/src/examples/Table/Responsive.js
@@ -2,41 +2,29 @@
   <thead>
     <tr>
       <th>#</th>
-      <th>Table heading</th>
-      <th>Table heading</th>
-      <th>Table heading</th>
-      <th>Table heading</th>
-      <th>Table heading</th>
-      <th>Table heading</th>
+      {Array.from({ length: 12 }).map((_, index) => (
+        <th key={index}>Table heading</th>
+      ))}
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>1</td>
-      <td>Table cell</td>
-      <td>Table cell</td>
-      <td>Table cell</td>
-      <td>Table cell</td>
-      <td>Table cell</td>
-      <td>Table cell</td>
+      {Array.from({ length: 12 }).map((_, index) => (
+        <td key={index}>Table cell {index}</td>
+      ))}
     </tr>
     <tr>
       <td>2</td>
-      <td>Table cell</td>
-      <td>Table cell</td>
-      <td>Table cell</td>
-      <td>Table cell</td>
-      <td>Table cell</td>
-      <td>Table cell</td>
+      {Array.from({ length: 12 }).map((_, index) => (
+        <td key={index}>Table cell {index}</td>
+      ))}
     </tr>
     <tr>
       <td>3</td>
-      <td>Table cell</td>
-      <td>Table cell</td>
-      <td>Table cell</td>
-      <td>Table cell</td>
-      <td>Table cell</td>
-      <td>Table cell</td>
+      {Array.from({ length: 12 }).map((_, index) => (
+        <td key={index}>Table cell {index}</td>
+      ))}
     </tr>
   </tbody>
 </Table>;
diff --git a/www/src/pages/components/table.js b/www/src/pages/components/table.js
@@ -59,7 +59,8 @@ export default withLayout(function TableSection({ data }) {
       <p>
         Across every breakpoint, use <code>responsive</code> for horizontally
         scrolling tables. Responsive tables are wrapped automatically in a{' '}
-        <code>div</code>.
+        <code>div</code>. The following example has 12 columns that are
+        scrollable horizontally.
       </p>
       <ReactPlayground codeText={TableResponsive} />