Max Width of Columns

[ghost]

I use the useFlexLayout Hook of react-table. In the definition of my columns I can define width, minWith and maxWith and these should be used to render each cell of that column. The strange thing is: minWidth and width are applied, but maxWidth isn't. But if I use some invalid value for maxWidth, for example -1, it is still not applied but the behaviour is correct. I will post the source code of my Table component as well as my column definition.
What I am trying to do is set a max width for a column so the whole column is not resizing further than the defined with while the other columns can resize dynamically.

My Table Component:

import React, { useState, useEffect } from "react";
import { useTable, useSortBy, useFlexLayout } from "react-table";
import styled from "styled-components";

const TableWrapper = styled.div`
  width: 100%;
  height: 100%;
  overflow-y: hidden;
  overflow-x: auto;
`;

const TTable = styled.div`
  display: flex;
  flex-direction: column;
  min-width: max-content !important;
  max-height: 100%;
`;

const THeader = styled.div`
  border-bottom: solid 1px #dbdbdb;
  padding: 10px 35px 10px 35px;
`;

const Th = styled.div`
  display: flex;
  justify-content: left;
  align-items: center;
`;

const ThLabel = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  color: #8b8b8b;
  font-size: 14px;
  height: 24px;
`;

const TBody = styled.div`
  display: block;
  width: 100%;
  overflow-y: auto;
  height: auto;
`;

const Tr = styled.div`
  padding: 15px 35px;
  border-bottom: solid 1px #dbdbdb;
  :hover {
    background-color: lightgray;
  }
`;

const Td = styled.div`
  margin-top: auto;
  margin-bottom: auto;
  word-wrap: break-word;
  font-size: 14px;
`;

export const Table = ({ columns, data }) => {
  const defaultColumn = React.useMemo(
    () => ({
      minWidth: 30,
      width: 150,
      maxWidth: 200,
    }),
    []
  );

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
  } = useTable(
    {
      autoResetSortBy: false,
      columns: columns,
      data: data,
      defaultColumn,
      sortTypes: {
        alphanumeric: (row1, row2, columnName) => {
          return compareIgnoreCase(
            row1.values[columnName],
            row2.values[columnName]
          );
        },
      },
    },
    useSortBy,
    useFlexLayout
  );

  return (
    <TableWrapper>
      <TTable {...getTableProps()}>
        <THeader>
          {headerGroups.map((headerGroup, i) => (
            <div {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map((column, i) => (
                <div
                  {...column.getHeaderProps(column.getSortByToggleProps())}
                  style={
                    column.getHeaderProps(column.getSortByToggleProps()).style
                  }
                >
                  <Th>
                    <ThLabel>{column.render("Header")}</ThLabel>
                    {column.isSorted && (
                      <span>{column.isSortedDesc ? "↓" : "↑"}</span>
                    )}
                  </Th>
                </div>
              ))}
            </div>
          ))}
        </THeader>
        <TBody {...getTableBodyProps()}>
          {rows.map((row, i) => {
            prepareRow(row);
            return (
              <Tr {...row.getRowProps()}>
                {row.cells.map((cell) => {
                  return (
                    <Td {...cell.getCellProps()}>{cell.render("Cell")}</Td>
                  );
                })}
              </Tr>
            );
          })}
        </TBody>
      </TTable>
    </TableWrapper>
  );
};

Column Definition that does not work:

const exampleColumns = React.useMemo(
    () => [
      {
        Header: "Name",
        accessor: "name",
        minWidth: 100,
        width: 100,
        maxWidth: 100,
      },
      {
        Header: "First Name",
        accessor: "firstName",
      },
      {
        Header: "Address",
        accessor: "address",
      },
      {
        Header: "Phone Number",
        accessor: "phoneNumber",
      },
      {
        Header: "Age",
        accessor: "age",
      },
    ],
    []
  );

Result of the Column Definition that does not work:

Hacky Column Definition that work:

const exampleColumns = React.useMemo(
    () => [
      {
        Header: "Name",
        accessor: "name",
        minWidth: 100,
        width: 100,
        maxWidth: -1,
      },
      {
        Header: "First Name",
        accessor: "firstName",
      },
      {
        Header: "Address",
        accessor: "address",
      },
      {
        Header: "Phone Number",
        accessor: "phoneNumber",
      },
      {
        Header: "Age",
        accessor: "age",
      },
    ],
    []
  );

Result of the Hacky Column Definition that work:

My Question here is: What am I doing wrong and how do I provide this hack that I don't even understand?

Thanks for helping,
Robin

[IanVS]

It's a bit verbose, but I've been able to use getCellProps and getHeaderProps to get the effect I want (grow up to a max-width):

...column.getHeaderProps((props, { column }) => (column.id === 'ip' ? [props, { style: { maxWidth: 150 } }] : props))

and 

...cell.getCellProps((props, { cell }) => (cell.column.id === 'ip' ? [props, { style: { maxWidth: 150 } }] : props))