title: Table in react bootstrap. How can i make it fit inside a container?
body: <p>I am using react bootstrap table to show my data. The table is not responsive and has a over-proportioned size on the right side.</p>
  <p>Look also at the picture showing that the table is much larger than the other components.</p>
  <p>I have tried to include a few css elements such as container, width, max-width, among others however nothing worked.
  I am importing the Bootstrap CSS using this: import 'bootstrap/dist/css/bootstrap.min.css';
  Thanks in advance.</p>
  <p>index.jsx</p>
  <pre><code>import React from 'react'
  import '../../../../src/styles.css'
  
  
  export default function Datatable({ data }) {
      const columns = data[0] &amp;&amp; Object.keys(data[0]);
      return (
     
          &lt;table class=&quot;table&quot; &gt;                    
                  &lt;thead class=&quot; table-striped table-bordered table-sm &quot;&gt;
                       &lt;tr  &gt;{data[0] &amp;&amp; columns.map((heading) =&gt; &lt;th&gt;{heading}&lt;/th&gt;)}&lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody class=&quot; table-striped table-bordered table-sm &quot; &gt; 
                      {data.map((row) =&gt; (
                      &lt;tr&gt;
                      { columns.map((column) =&gt; (
                          &lt;td&gt;{row[column]}&lt;/td&gt;
                      ))}
                      &lt;/tr&gt;
                      ))}
                  &lt;/tbody&gt;
            
          &lt;/table&gt;
       
      );
  }
  </code></pre>
  <p>styles.css</p>
  <pre><code>body {
    background: #fafafa;
  }
  table  {
    background: #f89c9c;
    font-size: 14px;
    text-align: center;
  }
  
  
  thead {
    font-size: 20px;
  }
  </code></pre>
  <p>Base.js</p>
  <pre><code>import React from 'react';
  import Menu from &quot;./Menu&quot;
  import Button from &quot;react-bootstrap/Button&quot;;
  import Container from &quot;react-bootstrap/container&quot;;
  import Row from &quot;react-bootstrap/row&quot;;
  
  
  const Base = ({
      title = &quot;My Title&quot;,
      description = &quot;My description&quot;,
      className = &quot;&quot;,
      children 
  }) =&gt; {
      return (
          &lt;div&gt;
              &lt;Menu /&gt;   
              &lt;Container fluid className=&quot;bg-light&quot; &gt;
                      
                      &lt;Container fluid &gt;
                      &lt;div className=&quot;col bg-light text-dark text-left pt-5&quot; &gt;
                          &lt;Row &gt;
                          &lt;h2 className=&quot;col-9 display-4 ml-0 font-weight-bold&quot;&gt;{title}&lt;/h2&gt;
                     
                          &lt;Button  variant=&quot;link&quot;  className=&quot; btn bg-light text-dark font-weight-bold&quot;&gt;Investor&lt;/Button&gt;
                          &lt;Button  variant=&quot;link&quot; className=&quot;btn bg-light text-dark font-weight-bold&quot;&gt;Borrower&lt;/Button&gt;
                          &lt;Button  variant=&quot;link&quot; className=&quot; btn bg-light text-dark font-weight-bold&quot;&gt;Charity&lt;/Button&gt;
                          &lt;/Row&gt;
                          &lt;p className=&quot; lead ml-0 font-weight-bold&quot;&gt;{description}&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;/Container&gt;
             
                  &lt;div className={className}&gt;{children}&lt;/div&gt;
             
              &lt;/Container &gt;
  
  
              &lt;footer className=&quot;footer bg-dark mt-auto py-3&quot;&gt;
  </code></pre>
  <p>UserDashboard.js</p>
  <pre><code>import React, {useState, useEffect} from 'react';
  import Base from '../core/Base'
  
  import './helper/EnhancedTable';
  import { Dash } from './helper/EnhancedTable'
  
  const UserDashboard = () =&gt; {
      return (
  
          &lt;Base title=&quot;User dashboard&quot;&gt;   
                 
                  &lt;Dash &gt;&lt;/Dash&gt;
                 
          &lt;/Base&gt;
  
      )
  }
  export default UserDashboard;
  </code></pre>
  <p>Table.js</p>
  <pre><code>import {API} from &quot;../../backend&quot;
  import React, {useState, useEffect} from 'react';
  import Datatable from './datatable';
  
  require(&quot;es6-promise&quot;).polyfill();
  require(&quot;isomorphic-fetch&quot;);
  
  
  export default function Dash() {
    const [data, setData] = useState([]);
  
    //now we create the quesry state
    const [q, setQ] = useState(&quot;&quot;);
  
    const [searchColumns, setSearchColumns] = useState([&quot;description&quot;, &quot;borrower_name&quot;]);
  
    //this is the function that we want tpo fire when the dependencies are triggered
    useEffect(() =&gt; {
  
      //fetch will make the call to the server
      fetch(`${API}project/`, {method: &quot;GET&quot;})
  
      //then response will handle answer from server transforming the HTTP data into JSON data
      .then((response) =&gt; response.json())
  
      //now that we access to the JSON data from server we will get if from the local storage
      .then((json) =&gt; setData(json))
    }, []);
  
    function search(rows) {
      
      return rows.filter(
        (row ) =&gt;
          searchColumns.some(column =&gt; row[column].toString().toLowerCase().indexOf(q.toLowerCase()) &gt; -1
          )
        ); 
    }
  
    const columns = data[0] &amp;&amp; Object.keys(data[0])
    return (
     
     
        &lt;div&gt;
          &lt;input type=&quot;text&quot; value={q} onChange={(e) =&gt; setQ(e.target.value) }/&gt;
            {
              columns &amp;&amp; columns.map(column =&gt;
               &lt;label&gt;
                  &lt;input
                    type=&quot;checkbox&quot;
                    checked={searchColumns.includes(column)} 
                    onChange={(e) =&gt; {
                      const checked = searchColumns.includes(column);
                      setSearchColumns((prev) =&gt; checked
                        ? prev.filter((sc) =&gt; sc !== column)
                        : [...prev, column]
                        );
                    }} 
                  /&gt;
                  {column}
              &lt;/label&gt;)
            }
  
               &lt;Datatable data={search(data)} /&gt;
         
          &lt;/div&gt;
  
    )
   
  }
  export {Dash};
  
  </code></pre>
  <p><img src="https://i.stack.imgur.com/6KJ1O.png" alt="enter image description here" /></p>