search

daisyui / react-daisyui

daisyUI components built with React 🌼
http://react.daisyui.com/
MIT License
957 stars 103 forks source link

Sizing for table columns #337

Open kaeon opened 1 year ago

kaeon commented 1 year ago

How can we set fixed or max sizing for table columns? I read for daisyui you have to do this with min-width and max-width on the table cell td elements (https://github.com/saadeghi/daisyui/discussions/532) but I can't figure out how to control the classnames for td elements with following

<Table.Row hover > <span>col1</span> <span>col2</span> <span>col3</span> </Table.Row>

dev0T commented 1 year ago

Reading the library's code, the current implementation of Table.Row doesn't allow a className to be provided to the cells specifically. In this case I believe you would achieve what you want by providing the className to the span tags.

benjitrosch commented 1 year ago

I'm not in love with how Tables are designed at the moment. We could expose a cellClassNames prop, but then different cells would want different styles etc... Any way I can think of to deal with this feels like a hack. Probably best to just tear out the existing logic and make something like a <Table.Cell> component.

kaeon commented 1 year ago

I'm not in love with how Tables are designed at the moment. We could expose a cellClassNames prop, but then different cells would want different styles etc... Any way I can think of to deal with this feels like a hack. Probably best to just tear out the existing logic and make something like a <Table.Cell> component.

Something like seems logical indeed

hjhjdev commented 1 year ago

Same happening here. Even using tanstack table with react-daisyui, current implementation doesn't allow editing td width.

kaeon commented 1 year ago

Does anyone know a workaround for this?