Can't fix the width of React-Table column

Question

Super noob question here, I'm trying to fix the widths of my react-table columns but it doesn't change (it stays at generated according to the width of the items inside), most of this table is from a tutorial to be honest so I'm not sure how most of it works.

I'm using react hooks, and react-table v7.7!

 const data = useMemo(() => expenses, [expenses]);

  const columns = useMemo(
    () => [
      {
        Header: "Date",
        accessor: "date",
        width: 100
      },
      {
        Header: "Expense",
        accessor: "expense",
        width: 200
      },
      {
        Header: "Amount",
        accessor: "amount",
        width: 100
      },
      {
        Header: " ",
        width: 100,
        Cell: ({ row }) => (
          <div>
            <button onClick={() => editHandler(row.original)}>Edit</button>
            <button onClick={() => deleteHandler(row.original)}>Delete</button>
          </div>
        ),
      },
    ],
    []
  );

....

        <table className="expenses-table" {...getTableProps()}>
          <thead>
            {headerGroups.map((headerGroup) => (
              <tr {...headerGroup.getHeaderGroupProps()}>
                {headerGroup.headers.map((column) => (
                  <th className="table-header" {...column.getHeaderProps()}>
                    {column.render("Header")}
                  </th>
                ))}
              </tr>
            ))}
          </thead>
          <tbody {...getTableBodyProps()}>
            {rows.map((row) => {
              prepareRow(row);
              return (
                <tr {...row.getRowProps()}>
                  {row.cells.map((cell) => {
                    return (
                      <td className="table-data" {...cell.getCellProps()}>
                        {cell.render("Cell")}
                      </td>
                    );
                  })}
                </tr>
              );
            })}
          </tbody>
        </table>

You gave your table a fixed width, according to your `const columns`, what were you expecting? — Someone Special, May 19 '21 at 17:06
I'm trying to give it a fixed width though, but it's still dynamic. — JeannelMYT, May 19 '21 at 17:51
I'm having exactly the same issue. @JeannelMYT did you found any solution by yourself at all? — Nuri Engin, Sep 14 '21 at 10:13
I'm having exactly the same issue. @NuriEngin did you found any solution by yourself at all? — Mustafa Yusuf, Jun 24 '22 at 17:08

score 2 · Answer 1 · answered May 20 '21 at 02:35

In order for width props to work, i think you need to add either of the following css/style to your expense-table class or to your <table> tag directly. This is to handle the overflowing behavior, since currently the contents have no choice but to resize the table column.

table.expense-table { table-layout:fixed; }
table.expense-table td { overflow: hidden; }

Can't fix the width of React-Table column

1 Answers1

Linked