github.com/cockroachdb/cockroach@v20.2.0-alpha.1+incompatible/pkg/ui/src/components/table/table.tsx (about)

     1  // Copyright 2019 The Cockroach Authors.
     2  //
     3  // Use of this software is governed by the Business Source License
     4  // included in the file licenses/BSL.txt.
     5  //
     6  // As of the Change Date specified in that file, in accordance with
     7  // the Business Source License, use of this software will be governed
     8  // by the Apache License, Version 2.0, included in the file
     9  // licenses/APL.txt.
    10  
    11  import * as  React from "react";
    12  import { default as AntTable, ColumnProps } from "antd/es/table";
    13  import ConfigProvider from "antd/es/config-provider";
    14  
    15  import "antd/es/table/style/css";
    16  import "./table.styl";
    17  
    18  export interface ColumnsConfig<T> extends Array<ColumnProps<T>> {}
    19  
    20  export interface TableProps<T> {
    21    columns: Array<ColumnProps<T>>;
    22    dataSource: Array<T>;
    23    noDataMessage?: string;
    24    tableLayout?: "fixed" | "auto";
    25    pageSize?: number;
    26    className?: string;
    27  }
    28  
    29  const customizeRenderEmpty = (text: string) => () => (
    30    <div className="empty-table__message">
    31      {text}
    32    </div>
    33  );
    34  
    35  Table.defaultProps = {
    36    noDataMessage: "No data to display",
    37    tableLayout: "auto",
    38    className: "",
    39  };
    40  
    41  export function Table<T>(props: TableProps<T>) {
    42    const { columns, dataSource, noDataMessage, tableLayout, pageSize, className } = props;
    43    return (
    44      <ConfigProvider renderEmpty={customizeRenderEmpty(noDataMessage)}>
    45      <AntTable<T>
    46        className={`crl-table-wrapper ${className}`}
    47        columns={columns}
    48        dataSource={dataSource}
    49        expandRowByClick
    50        tableLayout={tableLayout}
    51        pagination={{hideOnSinglePage: true, pageSize }}
    52      />
    53      </ConfigProvider>
    54    );
    55  }