/**
 * TEAM: frontend_infra
 * @flow
 */

import * as React from "react";
import SimpleTable from "../SimpleTable";
import data from "./data.json";
import {type EditorConfig} from "../../demoTypes";

export const liveDemoSettings: EditorConfig = {
  initialShowCode: false,
};

/**
 * @title SimpleTable Example
 * @description Native HTML table wrapper to display small amounts of read-only, tabular data.
 */
export default function SimpleTableDemo(): React.Element<"div"> {
  const columnDefinitions = [
    {
      id: "0",
      header: "ID",
      getText: row => row.id,
    },
    {
      id: "1",
      header: "Name",
      getText: row => row.name,
    },
    {
      id: "2",
      header: "Email",
      getText: row => row.email,
    },
    {
      id: "3",
      header: "Date",
      getText: row => row.date,
    },
    {
      id: "4",
      header: "City",
      getText: row => row.city,
    },
    {
      id: "5",
      header: "Amount",
      getText: row => row.amount,
    },
    {
      id: "6",
      header: "Company",
      getText: row => row.company,
    },
    {
      id: "7",
      header: "Task Status",
      getText: row => row.task,
    },
  ];
  return (
    <div style={{height: "400px", width: "100%", overflow: "scroll"}}>
      <SimpleTable
        data={data.slice(0, 5)}
        columnDefinitions={columnDefinitions}
        getUniqueRowId={data => data.id}
      />
    </div>
  );
}