gridjsgridjs-react

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


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

No matching records found

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.


Solution

  • By the way, the answer is:

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

    Found it here.