CODEWITHSUNDEEP
javascriptreactjsmaterial-uimui-datatable
Adrian
Adrian

Reputation: 945

Label text not updating in MUIDataTable ReactJS

I want to add multi language option in mui Datatables. I can change the translations but when I want to change language, I tried to give another object with the other translations (this object if I do console log I can see the changes) but the label texts not change.

I used a contextProvider to change the language selected and then get the specific dictionary with the translations.

Is a class component, so I did a static contextType with the correct provider.

Is there any possibility to re-render the element with another options or something like that?

options = {
 textLabels: this.context.translation.dataTables.textLabels
};

return(
 <MUIDataTable
   title={this.context.language.value}
   data={data}
   columns={columns}
   options={options}
 />
);

Upvotes: 4

Views: 2603

Answers (4)

Sandeep Jain
Sandeep Jain

Reputation: 1262

In MUIDataTable, We can override label name by providing label in MUIDataTableColumnDef options while making column.

Example :

const columns: MUIDataTableColumnDef[] = [
    {
        name: 'Id',
        label: 'ID',
        options: {
            download: false,
            customBodyRenderLite: (index: number) => {
                const desc: Description = evenMoreAbout[index]
                return <BasicInfo obj={desc} setIconClicked={setIconClicked} />
            }
        }
    },
    {
        name: 'id',
        label: 'ID',
        options: {
            display: 'excluded',
            download: true,
            customBodyRender: desc => desc.id
        }
    }]

Even though if we still want to over ride the label name on some condition of data using customHeadLabelRender ... we can as like below example

const columns: MUIDataTableColumnDef[] = [
    {
        name: 'Id',
        label: '',
        options: {
            download: false,
            customBodyRenderLite: (index: number) => {
                const desc: Description = evenMoreAbout[index]
                return <BasicInfo obj={desc} setIconClicked={setIconClicked} />
            },
            customHeadLabelRender: (dataIndex: number, rowIndex: number) => {
                return 'ID';
            }
        }
    }
]

Upvotes: 0

Carlos Rodriguez
Carlos Rodriguez

Reputation: 66

The best approach to re-render Mui-Datatables its updating the key of the table

key={this.context.language.value}

<MUIDataTable
   key={this.context.language.value}
   title={this.context.language.value}
   data={data}
   columns={columns}
   options={options}
 />

Upvotes: 4

Bruno Russi Lautenschlager
Bruno Russi Lautenschlager

Reputation: 21

You can force React component rendering:

  • There are multiple ways to force a React component rendering but they are essentially the same. The first is using this.forceUpdate(), which skips shouldComponentUpdate:
someMethod() {
    // Force rendering without state change...
    this.forceUpdate();
}
  • Assuming your component has a state, you could also call the following:
someMethod() {
    // Force rendering with a simulated state change
    this.setState({ state: this.state });
}

Upvotes: 1

Fahad Mahmood
Fahad Mahmood

Reputation: 159

use customRowRender Function in the options and manipulate table with respect to language

Override default row rendering with custom function.

customRowRender(data, dataIndex, rowIndex) => React Component

Upvotes: 0

Related Questions