[Question] How to change padding using attrs.padding in mTable?

[EV6999]

Hello, I'm trying to change padding using attrs.padding in mTable from default 16px to customer (12px, 16px).

But it seems there are only three options in the enum class. Is there any way to specify customer padding for all the cells in a table?

Thank you.

enum class MTableCellPadding {
    default, checkbox, none
}

[cfnz]

If you are wanting to do something custom you will need to turn to css.

So per cell, you can do it like:

tableCell("Dessert (100g serving)") {
    css { padding(10.px) }
}

or better, if you have multiple cells, create a rule and apply it:

...
private object ComponentStyles : StyleSheet("ComponentStyles", isStatic = true) {
    val myPadding by css {
        padding(10.px)
    }
}

override fun RBuilder.render() {
    ...
    tableCell("Dessert (100g serving)") {
        css(myPadding)
    }
    ...

If you need to do it for all cells in the table, then you can need to turn to overriding the Material UI relevant style from their docs it is .MuiTableCell-sizeMedium.

So, it would like like this (modified from the table demo):

    override fun RBuilder.render() {
        val styles = CssBuilder(allowClasses = false).apply {
            ".MuiTableCell-sizeMedium" {
                padding(10.px)
            }
        }

        injectGlobal(styles.toString())

        typography("Simple Table")
        simpleTable()
        ... etc
    }

Note if you are using the older version of Muirwik, then it would be mTableCell, etc.

[EV6999]

Thank you! It worked for me.