Question 194936 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to display a link when there are no rows in Ag-grid table

I am using AG Grid to display a table. When there are no rows, AG Grid displays a default text. What I am trying to do is, instead of text, display a link. By clicking the link, I want to open a form.
To accomplish this, I am using noRowsOverlayComponent. But AGGrid is not rendering the link. Here is the custom overlay component I wrote

import React from 'react';

export type NoRowsLinkProps = {
  text?: string;
  actionFunction?: any;
};
function NoRowsLink(props: NoRowsLinkProps) {
  debugger;
  function dummy() {}
  return (
    <div>
      <a onClick={props.actionFunction ? props.actionFunction : dummy} style={}>
        {props.text ? props.text : 'No rows to show'}
      </a>
    </div>
  );
}

export default NoRowsLink;

And I am passing this component to Ag-grid component using noRowsOverlayComponent prop
like below

<AgGridReact
.
 .
 .
 noRowsOverlayComponent={NoRowsLink}
 noRowsOverlayComponentParams={applicableNoRowsOverlayComponentParams}
 .
 .
 ./>

But the Ag grid is not rendering the anchor tag. What could be the problem here?

Tags:

2

Answers


  1. 0

    The issue you’re facing is likely related to how you’re passing the custom component to the noRowsOverlayComponent prop in the Ag Grid configuration. Instead of directly passing the component class, you should pass a function that returns the component.

    Here’s how you can modify your code to make it work:

    <AgGridReact
  // Other Ag Grid configurations
  noRowsOverlayComponent={() => <NoRowsLink />}
  noRowsOverlayComponentParams={applicableNoRowsOverlayComponentParams}
/>

    By wrapping the NoRowsLink component inside an arrow function, you ensure that it is lazily instantiated and rendered as a component when needed by Ag Grid. This way, Ag Grid will correctly render your custom component as the no rows overlay.

    Additionally, make sure that applicableNoRowsOverlayComponentParams is an object containing any necessary parameters for the NoRowsLink component, and pass it as the noRowsOverlayComponentParams prop.

    With these changes, Ag Grid should render your custom link component as the no rows overlay, and clicking on the link should trigger the provided action function.

    Login or Signup to reply.
  2. 0

    React is not rendering element without href attribute.
    Just place some empty href attribute.
    But be aware that your click handler should prevent default, otherwise, it will refresh the page.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search