How to make defaultColumn context aware and conditionally add functionality
Hey there,
I'm writing an invoice app for video productions and for that I make extensive use of the TanStack table. As for the rows I have different item types like "title", "item", "subtotal", … and each type has it's own specialities and columns to it.
The tricky part I'm challenged with is that most of the cells have one thing in common: They're inline editable. This I have implemented using the defaultColumn. What I'm struggling with is how to take this defaultColumn as a base and add features and such on top of it.
To give you an example: A title item for instance does not need parameters like "quantity", "unit" or "price" but should be span across almost the entire row. In order to make that working I have to conditionally check for each column if the row type is an item or a title and also check if that type needs to have the current column with an editable input or if an empty cell should be returned. And depending on the type of column I need different input formatting. A title should have bold text, number fields should render differently and text-align on the right and if the input contains currency I want it to have two decimals and the currency added as well. This results in a lot of spaghetti code and endless if-else-conditions and I feel like there must be an easier way to solve this. So I'd be very happy if someone can push me into the right direction on how to make this more versatile and easier to manage.
Ideally I was thinking if there's a way to define the base in the columnHelper and then take the defaultColumn (to keep it DRY) and add it on top for rendering. I'm not sure on how to get this working becasue as soon as I define
Thanks a ton for your help and time. Much appreciated!
I'm writing an invoice app for video productions and for that I make extensive use of the TanStack table. As for the rows I have different item types like "title", "item", "subtotal", … and each type has it's own specialities and columns to it.
The tricky part I'm challenged with is that most of the cells have one thing in common: They're inline editable. This I have implemented using the defaultColumn. What I'm struggling with is how to take this defaultColumn as a base and add features and such on top of it.
To give you an example: A title item for instance does not need parameters like "quantity", "unit" or "price" but should be span across almost the entire row. In order to make that working I have to conditionally check for each column if the row type is an item or a title and also check if that type needs to have the current column with an editable input or if an empty cell should be returned. And depending on the type of column I need different input formatting. A title should have bold text, number fields should render differently and text-align on the right and if the input contains currency I want it to have two decimals and the currency added as well. This results in a lot of spaghetti code and endless if-else-conditions and I feel like there must be an easier way to solve this. So I'd be very happy if someone can push me into the right direction on how to make this more versatile and easier to manage.
Ideally I was thinking if there's a way to define the base in the columnHelper and then take the defaultColumn (to keep it DRY) and add it on top for rendering. I'm not sure on how to get this working becasue as soon as I define
cellmetaThanks a ton for your help and time. Much appreciated!
