How to use localization in React DataTable

alexwayhill

I have been using DataTable frequently in JS applications, but right now is the first time to use it as part of a React application. I created a translation object like this:

const tableTranslations = {
    "emptyTable": I18N`No data available`,
    "info": I18N`Showing _START_ to _END_ of _TOTAL_ entries`,
    "infoEmpty": I18N`Showing 0 to 0 of 0 entries`,
    ...
}

But I haven't found a way to pass it into the data table, e.g., this won't work:

<DataTable columns={communicationColumns} data={systemIssues} localization={tableTranslations}
                               pagination/>

I had a look at the documentation, but couldn't find an example of internationalization in React.

Thanks for your help in advance!

allan

Hi,

There isn't a localization parameter for the <DataTable> component, which is why the above won't do anything (in fact, it should show an error in Typescript).

Instead, what to do is use the options parameter which allows you to pass in any of the DataTables options. For example:

import DtCore, { Options } from 'datatables.net-dt';
import DataTable, { Column } from 'datatables.net-react';
DataTable.use(DtCore);

function App() {
  const options: Options = {
    language: {
      emptyTable: `Geen resultaten aanwezig in de tabel`,
      info: `_START_ tot _END_ van _TOTAL_ resultaten`,
      infoEmpty: `Geen resultaten om weer te geven`,
    },
  };

  return (
    <>
        <DataTable ajax="/data.json" options={options} className="display">
          <Column title="Name" data="name" />
          <Column title="Position" data="position" />
          <Column title="Office" data="office" />
          <Column title="Extn." data="extn" />
          <Column title="Start date" data="start_date" />
          <Column title="Salary" data="salary" />
        </DataTable>
    </>
  );
}

I tried making a StackBlitz showing that but it is failing to install in their IDE at the moment. Downloading the project will allow it to work if you want to see that example running.

The <DataTables> component and the parameters it accepts is documented here.

Allan

alexwayhill

Hi Allan,

Thanks for the explanation. I just realized I had used a different component - react-data-table-component -, which is in parts similar to DataTables. I just found the link to the reference documentation of said component and am now able to localize. Thank you for taking the time to read and answer!

Best regards, Sascha