const BreakdownTable = ({ tabName }) => {
  // console.log(tabName);
  const data = React.useMemo(
    () => [
      {
        col1: "com.gumlet.limited-videoPlay",
        col2: "100",
        col3: "1.3k",
      },
    ],
    []
  );

  const columns = React.useMemo(
    () => [
      {
        Header: tabName,
        accessor: "col1",
      },
      {
        Header: "Unique Views",
        accessor: "col2",
      },
      {
        Header: "Total Views",
        accessor: "col3",
      },
    ],
    []
  );

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    // rows,
    prepareRow,
    page,
    canPreviousPage,
    canNextPage,
    pageOptions,
    // pageCount,
    gotoPage,
    nextPage,
    // previousPage,
    setPageSize,
    pageSize,
    state,
    setGlobalFilter,
  } = useTable(
    {
      columns,
      data,
      initialState: { pageSize: 15 },
    },
    useGlobalFilter,
    useSortBy,
    usePagination
  );

  const { globalFilter } = state;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62