Can't fix the width of React-Table column - reactjs

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>

Answer 1

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; }