GD
Gadget Developers•6mo ago
kalenjordan

Making the AutoTable feel more native

I have an autotable populating with some data but I wanted to make some improvements to make it feel more native: - The font size of the content is a bit too large - It's cropping the product title column too early I asked the AI assistant to make some changes and it's doing inline styles which I'm guessing isn't the ideal approach. Do I just need to build my own table out or can I make these tweaks in autotable? https://clhom.gadget.app/edit/staging/files/web/routes/index.jsx
Gadget Auth - Loading
Gadget Auth
No description
4 Replies
Millan
Millan•6mo ago
You can completely override the content that appears in AutoTable using the columns prop. Doing something like this can allow you to customize your table cell content 
<AutoTable
  model={api.someModel}
  columns={[
    "id",
    "someOtherField", 
    {
      header: "Custom cell with custom style",
      style: {
        // This style prop is needed to get around Polaris default styles for cells
        // Polaris has defaults for cell width, padding, etc.
        minWidth: "123px", 
      },
      render: ({ record }) => {
        return (
          <div>
            Custom cell: {record.someField} ({record.id})
          </div>
        );
      },
    },
  ]}
/>
<AutoTable
  model={api.someModel}
  columns={[
    "id",
    "someOtherField", 
    {
      header: "Custom cell with custom style",
      style: {
        // This style prop is needed to get around Polaris default styles for cells
        // Polaris has defaults for cell width, padding, etc.
        minWidth: "123px", 
      },
      render: ({ record }) => {
        return (
          <div>
            Custom cell: {record.someField} ({record.id})
          </div>
        );
      },
    },
  ]}
/>
kalenjordan
kalenjordanOP•6mo ago
nice thanks checking
kalenjordan
kalenjordanOP•6mo ago
dumb question but is there an easier way than this to do an underline hover state? 😅 https://clhom.gadget.app/edit/staging/files/web/routes/index.jsx?startLineNumber=58&startColumn=3&endLineNumber=67&endColumn=12
Gadget Auth - Loading
Gadget Auth
Millan
Millan•6mo ago
Instead of doing the style in a style tag, I would try to do it directly in the custom renderer element. Alternatively, you could make a css file to hold those styles

Did you find this page helpful?