Data Tables

import DataTable from "../components/DataTable"

export default function page(props) {

  // State for columns to hide
  const [hiddenColumns, setHiddenColumns] = useState([])

  // Viewport size hook
  const viewportSize = useWindowSize()

  // useEffect hook to dynamically hide columns on small screens
  useEffect(() => {
    if (viewportSize.width < 600) {
      setHiddenColumns(["city", "orders", "phone", "email"])
    } else if (viewportSize.width < 900) {
      setHiddenColumns(["city", "orders"])
    } else {
      setHiddenColumns([])
    }
  }, [viewportSize.width])


  const columns = React.useMemo(
    () => [
      {
        Header: "Name",
        accessor: "person",
      },
      {
        Header: "Company",
        accessor: "company",
      },
      {
        Header: "Email",
        accessor: "email",
      },
      {
        Header: "Phone",
        accessor: "phone",
      },
      {
        Header: "City",
        accessor: "city",
      },
      {
        Header: "Orders",
        accessor: "orders",
      },
    ],
    []
  )

  return(
    <DataTable 

      // data prop 
      items={data} 

      // columns prop
      columns={columns} 

      // set page size - default is 5
      defaultPageSize={10} 

      // pass hiddenColumns state if you use it
      hiddenColumns={hiddenColumns} 
    />
  )
}