GD
Gadget Developers•4w ago
shunt

Change Autotable column width

With Autotables, we seem to get a default max column width of 200px, applied as an inline style (see picture). Is there a better way to change this than with css: Gadget_PolarisAutoTable_IndexTableCell Polaris-IndexTable__TableCell > div { max-width:400px!important } Feels like there should be a param for it, but cant find any in the docs. I try to avoid !important when i can, but with inline styles there doesnt seem to be any other option.
No description
2 Replies
Millan
Millan•4w ago
You can customize the cell renderer with the style param in objects in the column prop 
<AutoTable
  model={api.yourModel}
  columns={[
    "id",
    {
      header: "Header for your column",
      field: "someField",
      style: { backgroundColor: "#abcdef", width: "1234px", maxWidth: "1234px" },
    },
    {
      style: { backgroundColor: "#abcdef", width: "1234px", maxWidth: "1234px" },
      header: "Custom cell with custom style",
      render: ({ record } ) => {
        return <div>Custom cell: ({record.id})</div>;
      },
    },
  ]}
/>
<AutoTable
  model={api.yourModel}
  columns={[
    "id",
    {
      header: "Header for your column",
      field: "someField",
      style: { backgroundColor: "#abcdef", width: "1234px", maxWidth: "1234px" },
    },
    {
      style: { backgroundColor: "#abcdef", width: "1234px", maxWidth: "1234px" },
      header: "Custom cell with custom style",
      render: ({ record } ) => {
        return <div>Custom cell: ({record.id})</div>;
      },
    },
  ]}
/>
shunt
shuntOP•4w ago
Thats perfect, thank you, I had tried to do it using render, but that only affected the stuff inside the div, not the containing div itself! Looking much better now.

Did you find this page helpful?