标签: ag-grid-react

我想在 React 中为我的大多数专栏使用 cellRenderer。因此，在我的 colDefs 中，我有一个名为 unit 的附加字段。如果该单元存在，我正在尝试在我的 TableCell React 组件中处理一个类似颜色网格的热图。这个相同的反应组件已经在其他数据网格中工作，比如 ZippyUI。cellRenderer 函数可以返回一个 React 组件，它是一个虚拟的 DOM 对象，还是必须是一个真正的 HTML DOM 对象？用 ag-Grid 的 cellRenderer 组件方法做这样的事情会更可取吗？

colDefs.map((x) => {
    if (x.hasOwnProperty('unit')) {
        x.cellRenderer = (params) => {
            return <TableCell value={params.value} units={x.unit} min={min[x.field]} max={max[x.field]} colorScheme={colorScheme} />;
        };
    }
});

我正在尝试编写一些简单的测试，让我想要呈现的标题和数据按预期显示。我创建了一个 repo - https://github.com/olore/ag-grid-testing-library来重现。该表在浏览器中打开时看起来就像我期望的那样。

<AgGridReact
  columnDefs={ /* First 2 always findable, others never */
  [
    { field: "make" }, 
    { field: "model" }, 
    { field: "price" }, 
    { field: "color" },
  ]}
  rowData={
  [{ 
    make: "Toyota", 
    model: "Celica",
    price: "35000", 
    color: "blue" 
    }]
  }
  pagination={true}></AgGridReact>

和测试

test('renders all the headers', async () => {
  const { getByText } = render(<GridExample />);
  expect(getByText("Make")).toBeInTheDocument();  // PASS
  expect(getByText("Model")).toBeInTheDocument(); // PASS
  expect(getByText("Price")).toBeInTheDocument(); // FAIL
  expect(getByText("Color")).toBeInTheDocument(); // FAIL
});

在本地，前 2 列标题和数据是可访问的，但没有呈现其他列，正如我在 testing-library 的输出中看到的那样。我正在 …

我正在开发 AgGrid （AgGridReact组件），其中一个标题单元格具有“全选”复选框

想知道是否有一种方法可以将全选复选框填充/留白，使其与列中的复选框对齐。

我正在使用 AgGrid 并且rowSelection="multiple"在我的网格{cellRendererFramework: PrintCell}上有最后一列，这是一个显示链接的小组件。

我想要这样，当我点击里面的链接时PrintCell，应该执行某个动作，而不改变网格本身的状态，并保持当前选定的行被选中，而不会使包含链接的行被选中。我尝试这样做event.stopPropagation并event.preventDefault阻止父行被选中，但无济于事。

任何想法如何实现这一目标？谢谢

是否可以始终在ag-grid中显示水平滚动条？这个问题是在他们的 GitHub 页面上作为问题提出的，但他们似乎忽略了它（我能告诉你的是，它不是在他们自己的问题跟踪器中创建的）。

我愿意接受官方解决方案、CSS hacks 以及任何真正有效的东西。

如何在 ag-grid 中替换 react-router-dom 的 with。它使页面重新加载，而不是伪装成单页应用程序。

我试过这个，但它不起作用

cellRenderer:  (params)=> {
  return <Link to={`/?info=${params.data.Id}`}>"+{params.value}+"</Link>, 

是否有可能我们可以使用 Link 而不是

cellRenderer:  function(params){
  return "<a href='/?info=" + params.data.Id+ "'>"+params.value+"</a>";},

使用 Link 时，它会抛出错误：

错误：ag-Grid：在绘制行的中间时无法获取网格以绘制行。您的代码可能在网格处于渲染阶段时调用了网格 API 方法。为了克服这个问题，将 API 调用置于超时状态，例如调用 setTimeout(function(){api.refreshView(),0}) 而不是 api.refreshView()。要查看导致刷新的代码部分，请检查此堆栈跟踪。

堆栈跟踪中的错误指向下面的代码，但使用元素它可以正常工作：

===> GetAPI(){ var url = xxxxxxxxxxx; axios.get(url).then(response => { if (response.status == 200) { this.setState({patients: response.data, loading: false }); } }) .catch(e => console .log('获取费用列表时出错：在 Listing/index.js > 错误：', e.message,'\n for user : ',this.props.auth.user.email)) }.

我在 react + redux 应用程序中使用最新的 agGrid 企业。

问题是我正在使用 agGrid 的内置编辑，这是直接修改底层数据，即从 redux 存储返回的数组。这违反了不变性原则。有没有办法使用/配置 agGrid no 来修改数据，但要：

• 对更改做出反应并调用一些带有更改信息的回调
• 然后我可以更新 redux 存储（数组中的一项）
• 然后 agGrid 可以检测到数组中只有一个对象发生了变化，并且它只会刷新单行

谢谢

在 ag-Grid 中，我想在像 Gmail 一样悬停一行时显示操作按钮。无论滚动位置如何，操作按钮都必须出现在网格的右端。

https://blog.ag-grid.com/build-email-client-with-ag-grid-like-gmail/提到了一种方法。他们在最后一列使用了 cellRenderer 并在“onCellMouseOver”发生时在其中显示按钮。只有当最后一列（使用 cellRenderer）始终在视图中时，此方法才有效。如果该列不在视图中，操作按钮也将不在视图中。

我不能使用这种方法，因为在我的情况下，有很多列，并且网格中的所有列不能同时显示在屏幕上。因此，根据滚动位置，右端可以有任何列，因此我们不知道要在哪一列上添加 cellRenderer。

我们将如何实现这一目标？

我有一个单元格渲染器，它返回行上的名称属性和对象：

const nameRenderer = ({ value, data }) => {
    const { id: queueId } = data;
    return (
      <Box>
        <div className="row-hidden-menu">
            <IconButton
              icon="menu"
              onClick={({ event }) => {
                event.preventDefault();
                event.stopPropagation();
                onMenuClick();
              }}
            />
        </div>
      </Box>
    );
  };

我遇到的问题是我有一个onRowClick函数，但我不希望当我单击nameRenderer. 现在，当菜单打开时，onRowClicked事件将导航到新页面。

如何获取 ag-grid 中应用排序的列列表。有一个 api (onSortChanged) 和一个事件 (sortChanged)。但在这种情况下两者都没有帮助。