title: How can I specify a minimum width for a column using react-resizable and antd's table?
body: <p>I'm trying to make antd's table have resizable columns. It works good. But I can't make any column smaller than its inner text, when I'm resizing the column. I've tried to set a minimal width, but it doesn't work. At least in my case. I believe there should be some properties, that I can pass to resizable component in order to set a minimal width.
  I've found the example How antd table can work together with react-resizable library. Right here <a href="https://ant.design/components/table/" rel="noreferrer">https://ant.design/components/table/</a>
  But even in this example it works the same as in my case.</p>
  
  <pre><code>import React, { useState } from "react";
  import { Button, Icon } from "antd";
  import { Resizable } from "react-resizable";
  import moment from "moment";
  import UniqIdsGenerator from "lib/uniqIdsGenerator";
  import SearchData from "containers/SearchData";
  import { StyledTable, LikeLink, Header, SearchWrapper } from "./style";
  
  const ResizeableTitle = props =&gt; {
      const { onResize, width, onClick, ...restProps } = props;
  
      const [allowClick, setAllowClick] = useState(true);
  
      if (!width) {
          return &lt;th {...restProps} /&gt;;
      }
  
      return (
          &lt;Resizable
              width={width}
              height={0}
              onResize={onResize}
              onMouseDown={e =&gt; {
                  setAllowClick(true);
              }}
              onResizeStart={e =&gt; {
                  setAllowClick(false);
              }}
              onClick={e =&gt; {
                  if (allowClick &amp;&amp; typeof onClick === "function") {
                      onClick(e);
                  }
              }}
          &gt;
              &lt;th {...restProps} /&gt;
          &lt;/Resizable&gt;
      );
  };
  
  const RowActions = ({ actions, uniqId, onRowAction, record, user }) =&gt;
      actions.map(({ label, action }, fieldName) =&gt; {
          let { status } = record;
          return label === "log" &amp;&amp; !statuses[status] ? null : (
              &lt;LikeLink
                  key={fieldName}
                  id={uniqId.getTableRowAction(action)}
                  onClick={e =&gt; {
                      e.preventDefault();
                      onRowAction({ record, action });
                  }}
              &gt;
                  {label}
              &lt;/LikeLink&gt;
          );
      });
  
  const HeaderActions = ({ actions, handleClick, uniqId, isAllowed }) =&gt;
      actions.map(({ label, action, icon }, fieldName) =&gt; {
          let button;
          label == "Add Upload" &amp;&amp; !isAllowed
              ? (button = (
                    &lt;Button
                        key={fieldName}
                        id={uniqId.getHeaderButton(fieldName)}
                        onClick={() =&gt; handleClick(action)}
                        disabled={true}
                        id={"disabledButton"}
                    &gt;
                        {icon &amp;&amp; &lt;Icon type={icon} /&gt;}
                        {label}
                    &lt;/Button&gt;
                ))
              : (button = (
                    &lt;Button
                        key={fieldName}
                        id={uniqId.getHeaderButton(fieldName)}
                        onClick={() =&gt; handleClick(action)}
                    &gt;
                        {icon &amp;&amp; &lt;Icon type={icon} /&gt;}
                        {label}
                    &lt;/Button&gt;
                ));
  
          return button;
      });
  
  class DataTable extends React.PureComponent {
      state = {
          columns: []
      };
  
      components = {
          header: {
              cell: ResizeableTitle
          }
      };
  
      uniqId = new UniqIdsGenerator(this.props.prefixId);
  
      componentDidMount() {
          const { handleClickOnTableRowAction } = this.props;
          this.getColumns({
              onRowAction: data =&gt; handleClickOnTableRowAction(data)
          });
      }
  
      handleResize = index =&gt; (e, { size }) =&gt; {
          this.setState(({ columns }) =&gt; {
              const nextColumns = [...columns];
              nextColumns[index] = {
                  ...nextColumns[index],
                  width: size.width
              };
              // console.log(size.width)
              return { columns: nextColumns };
          });
      };
  
      getColumns = ({ onRowAction }) =&gt; {
          const { columnsSchema, user } = this.props;
          const { uniqId } = this;
  
          let totalColumnsWidth = 250;
  
          const getTotalColumnWidth = column =&gt; {
              if (column.width) {
                  totalColumnsWidth += column.width;
              }
          };
  
          const checkForWidth = column =&gt;
              ((column.width &amp;&amp; totalColumnsWidth) || column.isWidthFixed) &amp;&amp;
              column.width;
  
          const prepareToTable = (column, fieldName) =&gt; {
              return {
                  title: column.label,
                  dataIndex: column.fieldName,
  
                  orgIndex: (text, record) =&gt; column.fieldName,
                  key: column.key ? column.key : column.fieldName,
                  width: checkForWidth(column),
                  defaultSortOrder: column.defaultSortOrder,
                  sorter: column.sortAs
                      ? (a, b) =&gt; sortAs[column.sortAs](a, b, column.fieldName)
                      : "",
                  // filters: column.filters &amp;&amp; column.filters,
                  onFilter: (value, record) =&gt; record.traceType.match(value),
                  // onHeaderCell: () =&gt; ({ 'id': uniqId.getTableTheadTh(fieldName) }),
                  render: (text, record) =&gt; {
                      return {
                          props: {
                              id: uniqId.getTableTbodyTd(fieldName),
                              className: "classNameOfCell"
                          },
                          children: addChildren(column, record)
                      };
                  }
              };
          };
  
          const addChildren = (column, record) =&gt; {
              if (column.render) {
                  return column.render(record);
              } else if (column.actions) {
                  return (
                      &lt;RowActions
                          {...column}
                          user={user}
                          uniqId={this.uniqId}
                          onRowAction={onRowAction}
                          record={record}
                      /&gt;
                  );
              }
              // }
              else {
                  return record[column.fieldName];
              }
          };
  
          columnsSchema &amp;&amp; columnsSchema.forEach(getTotalColumnWidth);
  
          const cols = columnsSchema.map(prepareToTable);
  
          // columnsSchema &amp;&amp; columnsSchema.forEach(getTotalColumnWidth);
  
          const columns =
              cols &amp;&amp;
              cols.map((col, index) =&gt; ({
                  ...col,
                  onHeaderCell: column =&gt; ({
                      width: column.width,
                      onResize: this.handleResize(index)
                  })
              }));
  
          columns &amp;&amp; this.setState({ columns: columns });
      };
  
      render() {
          const {
              data,
              staticData,
              getRowKey,
              onSearch,
              loading,
              handleClickOnTableRowAction,
              handleClickOnHeaderButton,
              headerActionsSchema,
              isSearchDisabled,
              isAllowed
          } = this.props;
  
          const { uniqId } = this;
          const { columns } = this.state;
  
          return (
              &lt;div id={uniqId.getComponentDivWrapper()}&gt;
                  &lt;Header id={uniqId.getHeaderDiv()}&gt;
                      {!isSearchDisabled &amp;&amp; (
                          &lt;SearchWrapper&gt;
                              &lt;SearchData
                                  id={uniqId.getHeaderInput()}
                                  placeholder="Search"
                                  onSearch={e =&gt; onSearch(e, staticData)}
                              /&gt;
                          &lt;/SearchWrapper&gt;
                      )}
                      &lt;HeaderActions
                          actions={headerActionsSchema ? headerActionsSchema : []}
                          uniqId={uniqId}
                          handleClick={handleClickOnHeaderButton}
                          isAllowed={isAllowed}
                      /&gt;
                  &lt;/Header&gt;
                  &lt;div id={uniqId.getTableDivWrapper()}&gt;
                      &lt;StyledTable
                          loading={loading}
                          dataSource={data}
                          bordered
                          rowKey={getRowKey}
                          size="small"
                          pagination={{ pageSize: 10 }}
                          onRow={(row, fieldName) =&gt; ({
                              id: uniqId.getTableTbodyTr(fieldName)
                          })}
                          onHeaderRow={(row, fieldName) =&gt; ({
                              id: uniqId.getTableTheadTr(fieldName)
                          })}
                          components={this.components}
                          columns={columns}
                      /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default DataTable;
  </code></pre>