Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unable to use expandRowsFn to load subRows on demand from the server #283

Closed
1 task done
achennuru opened this issue Mar 4, 2024 · 1 comment
Closed
1 task done

Comments

@achennuru
Copy link

achennuru commented Mar 4, 2024

mantine-react-table version

v1.3.4

react & react-dom versions

v18.2.0

Describe the bug and the steps to reproduce it

I am trying to load the subRows from the server when the user clicks on the expand button but this function does not get called no matter how its used.

Minimal, Reproducible Example - (Optional, but Recommended)

import React, { useMemo } from 'react';
import { MantineReactTable, useMantineReactTable } from 'mantine-react-table';
import { MantineProvider } from '@mantine/core';

//simple data example - Check out https://www.mantine-react-table.com/docs/examples/remote for a more complex example
const data = [
  {
    name: 'John',
    age: 30,
  },
  {
    name: 'Sara',
    age: 25,
  },
];

export default function App() {
  const columns = useMemo(
    () => [
      {
        accessorKey: 'name', //simple recommended way to define a column
        header: 'Name',
        muiTableHeadCellProps: { sx: { color: 'green' } }, //custom props
        Cell: ({ renderedCellValue }) => {
          return <strong>{renderedCellValue}</strong>;
        },
      },
      {
        accessorFn: (row: any) => row.age, //alternate way
        id: 'age', //id required if you use accessorFn instead of accessorKey
        header: 'Age',
        Header: <i style={{ color: 'red' }}>Age</i>, //optional custom markup
      },
    ],
    []
  );

  const table = useMantineReactTable({
    columns,
    data,
    manualExpanding: true,
    enableExpanding: true,
    enableExpandAll: false,
    paginateExpandedRows: false,
    filterFromLeafRows: false,
    expandRowsFn: (dataRow) => {
      console.log(dataRow);
      return dataRow.subRows;
    },
    getRowCanExpand: (row) => {
      return true;
    },
  });

  return (
    <MantineProvider
      theme={{
        colorScheme: 'light',
        primaryColor: 'blue',
      }}
    >
      <MantineReactTable table={table} />
    </MantineProvider>
  );
}

Screenshots or Videos (Optional)

NoActionOnExpand

Do you intend to try to help solve this bug with your own PR?

None

Terms

  • I understand that if my bug cannot be reliably reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.
@achennuru
Copy link
Author

I could use onExpandedChange instead.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant