reactjs - エクスポートを使用して非インデックス ファイルで react-data-grid をレンダリングする方法は?

Question

データのレンダリングにreact-data-gridを使用していますが、index.jsファイルでのみ機能しますが、通常のファイルで使用している場合、クラスと関数名を定義してファイルをエクスポートできません。

クラス名＆関数名でエクスポートしてみました。

import React, { useState, Component } from "react";
import ReactDOM from "react-dom";
import ReactDataGrid from "react-data-grid";
import { Toolbar, Data } from "react-data-grid-addons";
import createRowData from "./createRowData";

const defaultColumnProperties = {
  filterable: true,
  width: 200
};

const selectors = Data.Selectors;

const columns = [
  {
    key: "ID",
    name: "ID"
  },
  {
    key: "Data",
    name: "Data"
  },
  {
    key: "firstname",
    name: "first name"
  },
  {
    key: "amount",
    name: "Amount"
  }
].map(c => ({ ...c, ...defaultColumnProperties }));

const ROW_COUNT = 50;

const handleFilterChange = filter => filters => {
  const newFilters = { ...filters };
  if (filter.filterTerm) {
    newFilters[filter.column.key] = filter;
  } else {
    delete newFilters[filter.column.key];
  }
  return newFilters;
};

function getRows(rows, filters) {
  return selectors.getRows({ rows, filters });
}

function Example({ rows }) {
  const [filters, setFilters] = useState({});
  const filteredRows = getRows(rows, filters);
  return (
    <ReactDataGrid
      columns={columns}
      rowGetter={i => filteredRows[i]}
      rowsCount={filteredRows.length}
      minHeight={300}
      minWidth={1300}
      toolbar={<Toolbar enableFilter={true} />}
      onAddFilter={filter => setFilters(handleFilterChange(filter))}
      onClearFilters={() => setFilters({})}
    />
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Example rows={createRowData(50)} />, rootElement);

ルーティング用にファイルをエクスポートする必要があり、フィールドを検索するためのフィルター機能と共にグリッド ビューで公開するために別のファイルからデータを取得する必要があります。