A Table component using ant-design

Usage

import DataTable from "spectramicro-table";

const dataTableConfig = {
  apiUrl: "", // Base URL for resultset api
  enableSort: true,
  enableClientSideSort: false,
  enableColumnSearch: true,
  defaultColumnWidth: "33%",
  defaultSortOrder: "descend",
  enableBorder: true,
  enableSearchBar: true,
  searchBarPlaceholder: "",
  size: "large",
  enableTitleBar: true,
  title: "",
  enableFooterBar: false,
  footer: "",
  searchBarStyle: {
    float: "right",
    marginBottom: "5px",
  },
  columnStyle: {
    ...
    app_id: {
      width: "33%",
    },
    ...
  },
  pagination: {
    pageSize: 10,
    current: 1,
    total: 100,
  },
  fixedHeader: {
    y: 420,
    scrollToFirstRowOnChange: false,
  },
  tableOptions: { // show table options
    allowToggleColumnVisibility: true // Enable Show/Hide Columns
  },
  allowToggleColumnVisibility: true // Show/Hide button only
};


const initialRequest = {
  appId: "APP_id",
  resultsetId: "RESULTSET_ID",
  metadata: true,
  pageSize: 10,
  filters: [],
};

// SAMPLE COLUMN CONFIG
const columns = [
    {
      displayName: "text",
      fieldName: "key",
      fixed: "true",
      onCell: "event",
      render: "event",
      sortOrder: "1"
    }
];

// RESULTSET API RESPONSE (Not required if initialRequest is set)
const data = {
  // config: columns
};

const onRowClick = (row, rowIndex, event) => {};
const onCellClick = (row, rowIndex, event) => {};
const handleTableChange = (
  tableData
) => {};

const onRequest = () => {};
const onRequestSuccess = () => {};
const onRequestFailure = (err) => {};

<DataTable
  loading={false}
  initialRequest={initialRequest}
  config={dataTableConfig}
  data={response}
  onRowClick={onRowClick}
  onCellClick={onCellClick}
  onTableChange={handleTableChange}
  onRequest={onRequest}
  onRequestSuccess={onRequestSuccess}
  onRequestFailure={onRequestFailure}
/>;