4

I'm trying to implement the resizing feature with React-Table and the Hook useResizeColumns. I want to force the table to take always the full width of its container. Only the columns should change theirs size. Not the table. If you take a look into this example that I made here. (Codesandbox) You can easily resize the column to surpass the red container. And for some reason if you minimize the columns size, the table will fit always the container !

I don't understand the behavior here. Any ideas ? Thank you very much.

Zied Hf
  • 491
  • 3
  • 10
  • 30
  • The only way I found is to calculate a max-width for each columns basing on the container width. – Zied Hf Sep 29 '20 at 17:40

3 Answers3

3

You need to set the max width for the table. You can use this code.

const defaultColumn = React.useMemo(
    () => ({
      width: 100,
      minWidth: 50,
      maxWidth: 100
    }),
    []
  );

  const { headerGroups, rows, prepareRow } = useTable(
    {
      columns,
      data,
      defaultColumn
    },
    useResizeColumns,
    useFlexLayout
  );

After altering this, the table stays within its container.

Source:

https://codesandbox.io/s/intelligent-brook-0qicz?file=/src/App.js:1187-1314

sam
  • 31
  • 2
0

If you want a CSS solution, you have two options. Option #1 is probably what you want, but your intention is a bit unclear, so I've included a second option, just in case I've misunderstood your intention.

Option #1: (Give the table a scrollbar, mimicking the behavior most React tables seem to prefer.)

.table {
    overflow: auto;
}

or Option #2: (Shrink the columns to fit within the table)

.td, .th, .tr {
    flex-shrink: 1 !important;
    min-width: auto !important;
}
Eliezer Berlin
  • 3,170
  • 1
  • 14
  • 27
  • Is there a problem with either of these solutions? OP was a little unclear about what he wanted, but one of these two solutions should solve his problem. – Eliezer Berlin Oct 18 '20 at 16:32
  • The first option is most likely not what the OP was looking for. Option #2 is not bad, although the scaling is not very intuitive, I believe due to the nature of flexbox. Still, definitely does not deserve a -1, so you get a +1 from me. Whoever downvoted should explain why they chose to do so. – Avius Oct 19 '20 at 10:39
-2

Found the fix. You need to fix your css for table to have display:inline-block;. It is weird that a css fixes the issue :-). You can see the fixed issue over here https://codesandbox.io/s/react-table-with-full-width-forked-rbi6u

 .table {
  border: 2px red solid;
  display:inline-block;
}

Please try the sandbox again as I had missed saving the fix in codesandbox.

Praneeth Kumar Parayil
  • 32
  • 4
  • 1
    I just tested your sandbox and I can still reproduce the issue. – Fez Vrasta Oct 14 '20 at 11:02
  • Sorry, I had missed saving the sandbox. Can you try now? – Praneeth Kumar Parayil Oct 14 '20 at 11:29
  • Also, please try to clear cache just in case the CSS is cached in the browser. – Praneeth Kumar Parayil Oct 14 '20 at 12:05
  • 2
    The whole red box is growing, the OP is asking for the table to never exceed the red box, but they don't want to see the red box grow, they want the table to never grow more than allowed – Fez Vrasta Oct 14 '20 at 14:39
  • @FezVrasta If it's possible for you to fix it the way I did, you can initialize a maxWidth for each column or even calculate the maxWidth automatically after the mount of your component using : maxWidth = containerWidth / columnNumber. Check this out https://codesandbox.io/s/react-table-with-full-width-with-max-width-2tb3x – Zied Hf Oct 14 '20 at 20:56
  • This enforces the columns to never take more than 1/4th of the available space – Fez Vrasta Oct 16 '20 at 11:31