TFoot: type error for empty columns (<Td></Td>)

[jeevan-sg]

Having empty columns under TFoot causes type error:

       <TFoot>
          <Tr>
            <Td></Td>
            <Td>Previous</Td>
            <Td>Next</Td>
            <Td></Td>
          </Tr>
        </TFoot>

error:

(alias) const Td: React.ForwardRefExoticComponent<TdProps & React.RefAttributes<HTMLTableCellElement>>
import Td
Property 'children' is missing in type '{}' but required in type 'TdProps'.ts(2741)
types.d.ts(48, 5): 'children' is declared here.

[richbachman]

Hi @jeevan-sg

Thanks for catching this. We were just discussing this earlier today. We have a ticket in our current sprint to get his fixed. We'll send you an update when that's done.

[richbachman]

yes, TFoot can have its own columns not be consistent with THead. I think this would give better flexibility

Sorry one more thing here. Would you mind providing an example of what you're going for on this one? I just want to make sure I'm on the same page. Thanks!

[jeevan-sg]

For example: I have table header with 5 columns but table footer with 2 links - Next and Prev

With current Table implementation, I have to add 3 empty columns () and 2 columns with 'Next' and 'Prev' links. Now the challenge here would be center these links in 5 column arrangement.

But having footer columns NOT bound to header, we can define just 2 columns (without having to worry about empty and spanning columns)

[richbachman]

Thanks for the example. Now that I'm thinking about this more, I think colSpan would help out in your example as well. I'm working on adding those additional standard html td props this sprint. Once those changes are deployed, I'll let you know.

[jeevan-sg]

yes colSpan would help spanning columns but wondering how can be align 2 links at the center of 5 column arrangement?

[richbachman]

Once we get the colSpan prop changes deployed you should be able to do something like this:

<TFoot>
    <Tr>
        <Td colSpan={5}>
            <Box display="flex" justifyContent="center">
                <Box marginRight="space60">
                    <Anchor href="#">Link 1</Anchor>
                </Box>
                <Anchor href="#">Link 2</Anchor>
            </Box>
        </Td>
    </Tr>
</TFoot>

Which would look like:

https://share.getcloudapp.com/xQuYkW1x

Let me know if that helps.

[richbachman]

Ho @jeevan-sg. We just merged a fix for the colSpan prop on Td. All table elements should now accept their standard HTML props. Td can also be empty now as well.

[jeevan-sg]

thanks @richbachman