React DataGrid data
 

в material ui есть компонент DataGrid, мне нужно получить данные с него. Получить я могу через Ref, на просторах интерента нашел такой код, и он работает. Но мне кажется что это не совсем правильно. Тем более у DataGrid есть useGridApiContext() для получения Ref, но как ее передать в handleHelp не могу догнать
Также в доках пишут "The ref is forwarded to the root element. This means that, without changing the rendered root element via the component prop, it is forwarded to the outermost DOM element which the component renders. If you pass a different component via the component prop, the ref will be attached to that component instead" но как его словить я не знаю (мало опыта)

const columns = [
  { field: 'datetime',  headerName: 'дата/время', width: 120, align:'center'},
  { field: 'order',     headerName: '№ заказа', width: 100 , align:'center'},
  { field: 'installers', headerName: 'установщики', width: 120,  align:'center' },
];

function useApiRef() {
  const apiRef = React.useRef(null);
  const _columns = React.useMemo( () =>columns.concat({field: "__HIDDEN__", width: 0,renderCell: (params) => {apiRef.current = params.api;return null;}}), []  );
  return { apiRef, columns: _columns };
}
export function TodosTable(props) {
  const { apiRef, columns } = useApiRef();
  const handleHelp=()=>{
    console.log(apiRef.current.getVisibleRowModels())
  }
  return (<>
    <DataGrid
      rows={props.rows}
      columns={columns}
    />
    <Button onClick={handleHelp} >+</Button>
  </>)
}

Мне нужен был Ref чтоб получать данные с кнопки, но я эту кнопку разместил внутри DataGrid, получилось эстетичнее чем планировал

<DataGrid
        rows={rows}
        columns={columns}
        components={{
          Toolbar: CustomToolbar,
        }}        
      />

const ExportIcon = createSvgIcon(<path d="M19 12v7H5v-7H3v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2zm-6 .67l2.59-2.58L17 11.5l-5 5-5-5 1.41-1.41L11 12.67V3h2z" />, 'SaveAlt',);
function CustomToolbar() {
  const apiRef=useGridApiContext()
  const buttonBaseProps = {
    color: 'primary',
    size: 'small',
    startIcon: <ExportIcon />,
  };
  return (
    <GridToolbarContainer>
      {/* <GridToolbarColumnsButton />      <GridToolbarDensitySelector />      <GridToolbarExport /> */}
      <GridToolbarFilterButton />
      <Button
        {...buttonBaseProps}        
        onClick={()=>saveAsExcel(apiRef.current.getVisibleRowModels())}
      >
        Export XLSX
      </Button>
    </GridToolbarContainer>
  );
}

Вариант с первого поста плох, там создается пустой заголовок, который в конечном итоге виден и отображается в фильтре.

Вопрос о выносе данных за пределы уже созданного элемента остается открытым. Я понимаю что это просто, но как, не могу найти материал...

может я непонятно объясняю. Например есть стандартный <Button /> как мне внутри передать данные наружу (или выполнить функцию)?

Передай кнопке нужную функцию - она ее и выполнит.

Реакт компонент возвращает только jsx.
Но может получить данные и функции в пропсах. Может использовать контент или mobx-данные. Так же может генерить события...