Applying specific theme for react material-table

Question

I'm trying to integrate react material-table (https://github.com/mbrn/material-table) with my project.

1. I want to update the styling/theme.

I used something like.

<MaterialTable options={{
                        rowStyle: x => {
                            if ( x.id % 2 ) {
                            return { backgroundColor: "#f2f2f2" }
                            }
                        },
                        'headerStyle' : {
                            backgroundColor: 'red',
                            color: theme.palette.common.white
                        }
                        }}
    columns={columns}
    data={data}
    title="New Table"
/>

However I want to have a generic styling and theme like

const CustomTableCell = withStyles(theme => ({
  head: {
    backgroundColor: theme.palette.common.black,
    color: theme.palette.common.white,
  },
  body: {
    fontSize: 14,
  },
}))(TableCell);

Basically i want to have something like CustomMaterialTable which is nothing but my theme/style.

2. Striping the table rows. In the above code snippet, I used a logic to have striped rows.

if ( x.id % 2 ) {
    return { backgroundColor: "#f2f2f2" }
}

Since my table will be having sorting, I want the it to be on a auto generated row id rather than x.id (where x is my data).

3. I want to use rtl and text in multiple languages based on the language selection (dynamic).

Answer 1

1. You can overrides components. Look at example: https://mbrn.github.io/material-table/#/docz-examples-10-example-component-overriding

2. Can you try x.tableData.id instead of x.id, please?

3. You should use material-ui theme with direction (ltr or rtl): https://material-ui.com/customization/themes/