vitess.io/vitess@v0.16.2/web/vtadmin/src/components/dataTable/DataTable.tsx (about)

     1  /**
     2   * Copyright 2021 The Vitess Authors.
     3   *
     4   * Licensed under the Apache License, Version 2.0 (the "License");
     5   * you may not use this file except in compliance with the License.
     6   * You may obtain a copy of the License at
     7   *
     8   *     http://www.apache.org/licenses/LICENSE-2.0
     9   *
    10   * Unless required by applicable law or agreed to in writing, software
    11   * distributed under the License is distributed on an "AS IS" BASIS,
    12   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    13   * See the License for the specific language governing permissions and
    14   * limitations under the License.
    15   */
    16  import * as React from 'react';
    17  import { useLocation } from 'react-router-dom';
    18  
    19  import { useURLPagination } from '../../hooks/useURLPagination';
    20  import { useURLQuery } from '../../hooks/useURLQuery';
    21  import { stringify } from '../../util/queryString';
    22  import { PaginationNav } from './PaginationNav';
    23  
    24  interface Props<T> {
    25      // When passing a JSX.Element, note that the column element
    26      // will be rendered *inside* a <th> tag. (Note: I don't love this
    27      // abstraction + we'll likely want to revisit this when we add
    28      // table sorting.)
    29      columns: Array<string | JSX.Element>;
    30      data: T[];
    31      pageSize?: number;
    32      renderRows: (rows: T[]) => JSX.Element[];
    33      title?: string;
    34  }
    35  
    36  // Generally, page sizes of ~100 rows are fine in terms of performance,
    37  // but anything over ~50 feels unwieldy in terms of UX.
    38  const DEFAULT_PAGE_SIZE = 50;
    39  
    40  export const DataTable = <T extends object>({
    41      columns,
    42      data,
    43      pageSize = DEFAULT_PAGE_SIZE,
    44      renderRows,
    45      title,
    46  }: Props<T>) => {
    47      const { pathname } = useLocation();
    48      const urlQuery = useURLQuery();
    49  
    50      const totalPages = Math.ceil(data.length / pageSize);
    51      const { page } = useURLPagination({ totalPages });
    52  
    53      const startIndex = (page - 1) * pageSize;
    54      const endIndex = startIndex + pageSize;
    55      const dataPage = data.slice(startIndex, endIndex);
    56  
    57      const startRow = startIndex + 1;
    58      const lastRow = Math.min(data.length, startIndex + pageSize);
    59  
    60      const formatPageLink = (p: number) => ({
    61          pathname,
    62          search: stringify({ ...urlQuery.query, page: p === 1 ? undefined : p }),
    63      });
    64  
    65      return (
    66          <div>
    67              <table>
    68                  {title && <caption>{title}</caption>}
    69                  <thead>
    70                      <tr>
    71                          {columns.map((col, cdx) => (
    72                              <th key={cdx}>{col}</th>
    73                          ))}
    74                      </tr>
    75                  </thead>
    76                  <tbody>{renderRows(dataPage)}</tbody>
    77              </table>
    78  
    79              <PaginationNav currentPage={page} formatLink={formatPageLink} totalPages={totalPages} />
    80              {!!data.length && (
    81                  <p className="text-secondary">
    82                      Showing {startRow} {lastRow > startRow ? `- ${lastRow}` : null} of {data.length}
    83                  </p>
    84              )}
    85          </div>
    86      );
    87  };