title: Changing column width in react-table
body: <p>I have a react-table and I am trying to change the column size.  I've tried editing the "width" value within the columns, editing the values in the scss stylesheet, and adding inline styling, but nothing is working.  Where do I make css changes to this react-table ?  Any help would be appreciated.  Any example I see changes it within the column area as I've tried.</p>
  
  <pre><code>import React, {useState, Fragment} from "react";
  import {useTable, useFilters, useGlobalFilter, useRowSelect} from "react-table";
  import dataSet from "../data";
  import {IndeterminateCheckbox} from './TableCheckbox';
  
  
  function DeployTable() {
  
      function DefaultColumnFilter({
                                       column: { filterValue, preFilteredRows, setFilter },
                                   }) {
          const count = preFilteredRows.length
  
          return (
              &lt;input
                  value={filterValue || ''}
                  onChange={e =&gt; {
                      setFilter(e.target.value || undefined) // Set undefined to remove the filter entirely
                  }}
                  placeholder={`Search ${count} records...`}
              /&gt;
          )
      }
  
      const [data] = useState(dataSet);
  
      const [columns] = useState([
  
          {
              width:'20',
              Header: "Deploy Id",
              accessor: "deploy_id"
          },
          {
  
              Header: "Requestor",
              accessor: "requestor",
              filter: "fuzzyText"
          },
          {
              Header: "Market",
              accessor: "market"
          },
          {
              Header: "Email",
              minWidth: 50,
              maxWidth: 50,
              accessor: "email"
          },
          {
              Header: "Environment",
              accessor: "environment"
          },
          {
              Header: "Completed Date",
              accessor: "completed_date"
          },
          {
              Header: "Deploy Group",
              accessor: "deploy_group"
          },
          {
              Header: "Job Status",
              accessor: "job_status"
          },
          {
              Header: "CRQ",
              accessor: "crq"
          }
  
      ]);
      const defaultColumn = React.useMemo(
          () =&gt; ({
              // Let's set up our default Filter UI
              Filter: DefaultColumnFilter,
          }),
          []
      )
      const filterTypes = React.useMemo(
          () =&gt; ({
              text: (rows, id, filterValue) =&gt; {
                  return rows.filter(row =&gt; {
                      const rowValue = row.values[id];
                      return rowValue !== undefined
                          ? String(rowValue)
                              .toLowerCase()
                              .startsWith(String(filterValue).toLowerCase())
                          : true;
                  });
              }
          }),
          []
      );
      const {
          getTableProps,
          getTableBodyProps,
          headerGroups,
          rows,
          prepareRow
      } = useTable({
              columns,
              data,
              defaultColumn,
              filterTypes
          },
          useFilters,
          useGlobalFilter,
          useRowSelect,
          // Here we will use a plugin to add our selection column
          hooks =&gt; {
              hooks.visibleColumns.push(columns =&gt; {
                  return [
                      {
                          id: 'selection',
                          // Make this column a groupByBoundary. This ensures that groupBy columns
                          // are placed after it
                          groupByBoundary: true,
                          // The header can use the table's getToggleAllRowsSelectedProps method
                          // to render a checkbox
                          Header: ({ getToggleAllRowsSelectedProps }) =&gt; (
                              &lt;div&gt;
                                  &lt;IndeterminateCheckbox {...getToggleAllRowsSelectedProps()} /&gt;
                              &lt;/div&gt;
                          ),
                          // The cell can use the individual row's getToggleRowSelectedProps method
                          // to the render a checkbox
                          Cell: ({ row }) =&gt; (
                              &lt;div&gt;
                                  &lt;IndeterminateCheckbox {...row.getToggleRowSelectedProps()} /&gt;
                              &lt;/div&gt;
                          ),
                      },
                      ...columns,
                  ]
              })
          });
  
      return (
          &lt;Fragment&gt;
              &lt;table {...getTableProps()}  &gt;
                  &lt;thead&gt;
                  {headerGroups.map(headerGroup =&gt; (
                      &lt;tr {...headerGroup.getHeaderGroupProps()}&gt;
                          {headerGroup.headers.map(column =&gt; (
                              &lt;th {...column.getHeaderProps()}&gt;{column.render("Header")}
                                  &lt;div&gt;{column.canFilter ? column.render('Filter') : null}&lt;/div&gt;&lt;/th&gt;
                          ))}
                      &lt;/tr&gt;
                  ))}
                  &lt;/thead&gt;
                  &lt;tbody {...getTableBodyProps()}&gt;
                  {rows.map((row, i) =&gt; {
                      prepareRow(row);
                      return (
                          &lt;tr {...row.getRowProps()}&gt;
                              {row.cells.map(cell =&gt; {
                                  return &lt;td {...cell.getCellProps()}&gt;{cell.render("Cell")}&lt;/td&gt;;
                              })}
                          &lt;/tr&gt;
                      );
                  })}
                  &lt;/tbody&gt;
              &lt;/table&gt;
          &lt;/Fragment&gt;
      );
  }
  
  export default DeployTable;
  </code></pre>
  
  <p>Here in the stylesheet.</p>
  
  <pre><code>    .Button {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    padding: 10px;
    font-size: 14px;
  }
  body {
    background-color: #d1e5f0;
    font: 14px sans-serif;
  }
  
  #container {
    width: 100%;
    height: 100%;
    position: relative;
  }
  
  #title {
    font: 26px sans-serif;
    position: absolute;
    top: -40px;
    left: 450px;
  }
  
  #FilterableTable {
    width: 90%;
    height: 90%;
    position: absolute;
    top: 40px;
    left: 20px;
  }
  
  .SearchBar {
    display: inline;
    position: relative;
    left: 1%;
  }
  
  .SearchBar input {
    position: relative;
    left: 2%;
  }
  
  .Button {
    display: inline;
    position: relative;
    left: 1%;
  }
  
  
  table {
    empty-cells: show;
    position: initial;
    top: 40px;
    left: 20px;
    border-collapse: collapse;
    margin-bottom: 20px;
    margin-top: 20px;
  }
  
  table a:link, a:visited { text-decoration: none; }
  
  table a:hover, a:active { text-decoration: underline; }
  
  table, th, td { border: 1px solid black; }
  table, th, tr { border: 1px solid black; }
  
  td, th {
    padding: 5px;
    text-align: center;
    height: 20px;
  }
  
  th {
    background-color: #4393c3;
    color: #d9f0a3;
  }
  
  td { background-color: #92c5de; }
  
  tr { background-color: #92c5de; }
  
  tr:hover td { background-color: #edf8b1; }
  tr:hover tr { background-color: #edf8b1; }
  
  /*
  This query will take effect for any screen smaller than 480px.
      */
  @media only screen and (max-device-width: 480px) {
  
  
  
    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr {
      display: block;
    }
    table{
      border: none;
      width: 100%;
      left: 0px;
      padding-right: 40px;
      height: 400px;
      overflow-y: scroll;
    }
    tbody{
      border: none;
      width: 100%;
      left: 0px;
  
    }
    /* Hide table headers (but not display: none;, for accessibility) */
    thead tr {
      position: absolute;
      top: -9999px;
      left: -9999px;
    }
  
    tr {
      margin: 0 0 1rem 0;
    }
    .ReactTable .rt-thead {
      overflow-y: scroll;
    }
  
  
    td {
      /* Behave  like a "row" */
      border: none;
      border-bottom: 1px solid #eee;
      position: relative;
      padding-left: 50%;
    }
  
    td:before {
      /* Now like a table header */
      position: absolute;
      /* Top/left values mimic padding */
      top: 0;
      left: 6px;
      width: 45%;
      padding-right: 10px;
      white-space: nowrap;
    }
    td:nth-of-type(1):before { content: "Select"; }
    td:nth-of-type(2):before { content: "Deploy ID"; }
    td:nth-of-type(3):before { content: "Requestor"; }
    td:nth-of-type(4):before { content: "Market"; }
    td:nth-of-type(5):before { content: "Env"; }
    td:nth-of-type(6):before { content: "Group"; }
    td:nth-of-type(7):before { content: "Deploy Date"; }
    td:nth-of-type(8):before { content: "Approver"; }
    td:nth-of-type(9):before { content: "Completed Date"; }
    td:nth-of-type(10):before { content: "CRQ"; }
    td:nth-of-type(11):before { content: "Job Status"; }
  }
  </code></pre>