1import React from "react";
2import ReactDOM from "react-dom";
3import DataTable from "react-data-table-component";
4import Card from "@material-ui/core/Card";
5import SortIcon from "@material-ui/icons/ArrowDownward";
6import movies from "./movies";
7import "./styles.css";
8
9const columns = [
10  {
11    id: 1,
12    name: "Title",
13    selector: (row) => row.title,
14    sortable: true,
15    reorder: true
16  },
17  {
18    id: 2,
19    name: "Director",
20    selector: (row) => row.director,
21    sortable: true,
22    reorder: true
23  },
24  {
25    id: 3,
26    name: "Runtime (m)",
27    selector: (row) => row.runtime,
28    sortable: true,
29    right: true,
30    reorder: true
31  }
32];
33
34function App() {
35  return (
36    <div className="App">
37      <Card>
38        <DataTable
39          title="Movies"
40          columns={columns}
41          data={movies}
42          defaultSortFieldId={1}
43          sortIcon={<SortIcon />}
44          pagination
45          selectableRows
46        />
47      </Card>
48    </div>
49  );
50}
51
52const rootElement = document.getElementById("root");
53ReactDOM.render(<App />, rootElement);
54