Change the "No matching records found" message in Gridjs gridjs-react

Question

I am using gridjs-react library and cannot customize the "No matching records found" message.

I have been able to customize many parts of gridjs like this:

 style={{
          td: {
            height: '40px',
            maxWidth: '60px',
            fontSize: '12px',
            padding: '1px',
          },
          th: {
            fontSize: '12px',
          },
          footer: {
            fontSize: '12px',
            padding: '12px',
            backgroundColor: '#f9fafb',
          },
        }}
        language={{
          pagination: {
            previous: '前',
            next: '次',
            showing: '\n',
            to: '~',
            of: '件目を表示（全',
            results: '件）',
          },
        }}

But when it come to the No matching records found when no records, I have been struggling very hard.

In the documentation there is a notfound classname, but no try has worked until now.

For example, adding

      <Grid
        data={rows}
        columns={cols}
        notfound="my new message" 
      />

     // or

      <Grid
        data={rows}
        columns={cols}
        style={{
        ...
        notfound:"my new message" 
        ...
        }}
        
/>

in the props or notfound:"my new message" in the style of the grid. There is also a language docs to configure many details, results had been the same.

I appreciate any help. Thank you.

score 1 · Accepted Answer · answered Mar 23 '22 at 06:07

By the way, the answer is:

language={{
        pagination: {
          previous: '前',
          next: '次',
          showing: '\n',
          to: '~',
          of: '件目を表示（全',
          results: '件）',
        },
        noRecordsFound: '該当する情報が見つかりません',
      }}

Found it here.

Change the "No matching records found" message in Gridjs gridjs-react

1 Answers1