Geforce File Manager

NAME	SIZE	ACTIONS
📄 DataTable.js	1,235 B	[ EDIT ] \| [ DEL ]
📄 DatePicker.js	1,421 B	[ EDIT ] \| [ DEL ]
📄 OverviewPanel.js	1,014 B	[ EDIT ] \| [ DEL ]
📄 TopUsers.js	1,992 B	[ EDIT ] \| [ DEL ]
📄 TopVideos.js	2,633 B	[ EDIT ] \| [ DEL ]
📄 TotalVideoViewsByUser.js	790 B	[ EDIT ] \| [ DEL ]
📄 TotalViewsGraph.js	3,001 B	[ EDIT ] \| [ DEL ]
📄 TotalWatchGraph.js	2,949 B	[ EDIT ] \| [ DEL ]
📄 VideoAverageWatchTime.js	847 B	[ EDIT ] \| [ DEL ]
📄 VideoAverageWatchTimeByUser.js	861 B	[ EDIT ] \| [ DEL ]
📄 VideoTimeline.js	2,670 B	[ EDIT ] \| [ DEL ]
📄 VideoTotalWatchTimeByUser.js	857 B	[ EDIT ] \| [ DEL ]
📄 VideoViews.js	818 B	[ EDIT ] \| [ DEL ]

[ CLOSE ]

EDIT: DataTable.js

const { __ } = wp.i18n;
const { useEffect, useState } = wp.element;
const { Card, CardBody } = wp.components;
import Loading from "@/admin/settings/components/Loading";
import Pagination from "@/admin/ui/Pagination";
import Table from "@/admin/ui/Table";

export default ({
  perPage = 10,
  title,
  page,
  setPage,
  loading,
  total,
  totalPages,
  columns,
  data,
  onSelect,
}) => {
  if (loading) {
    return (
      <Card>
        <Loading />
      </Card>
    );
  }

if (!data?.length) {
    return (
      <Card size="large" className="presto-card">
        <CardBody className="presto-flow">
          <div className="presto-card__title">{title}</div>
          <div style={{ opacity: 0.65 }}>
            {__("No data available.", "presto-player")}
          </div>
        </CardBody>
      </Card>
    );
  }

return (
    <div className="datatable">
      <Table
        data={data}
        columns={columns}
        perPage={perPage}
        onRowClick={onSelect}
        title={title}
      />

{!!total && (
        <Pagination
          page={page}
          setPage={setPage}
          perPage={perPage}
          total={total}
          totalPages={totalPages}
        />
      )}
    </div>
  );
};