test-test-data-table

@xest-ui/data-table

Description

@xest-ui/data-table is an npm package that allows you to create a paginated table with filters and sorting for a Xest API endpoint. It provides the flexibility to inject custom components for inputs, buttons, tables, etc., enhancing the user experience.

Bring In custom components from your favorite UI library such as MUI, Chakra-UI, ANTD etc

Installation

npm install @xest-ui/data-table

Usage

Example Usage:

import { DTComponent } from "@xest-ui/data-table";
import {
  Button,
  Checkbox,
  DatePicker,
  Dropdown,
  Input,
  Modal,
  Radio,
  Table,
} from "antd";
import dayjs from "dayjs";
import { MdCancel } from "react-icons/md";

export const DefaultTableComponents: Partial<DTComponent<any>> = {
  Modal: ({ props }) => (
    <Modal
      open={props.openState}
      onCancel={() => props.onClose(false)}
      children={props.children}
      footer={props.footer}
      closeIcon={props.closeIcon}
      title={props.title}
      className={props.className}
      styles={{
        body: {
          padding: "3.5rem 1rem",
        },
      }}
    />
  ),
  Button: ({ props, action }) => {
    if (action === "manageFilter.modal.removeFilter") {
      return <Button {...props} size="middle" danger />;
    }
    if (action === "filters.FilterBtn") {
      return (
        <Button
          {...props}
          icon={<MdCancel onClick={(e) => props.onIconClick?.(e)} />}
        />
      );
    }
    if (action === "columnTitle.sort.asc") {
      return <Button {...props} children={<>asc</>} />;
    }
    if (action === "columnTitle.sort.desc") {
      return <Button {...props} children={<>desc</>} />;
    }
    if (action === "columnTitle.sort.remove") {
      return <Button {...props} children={<>cancel</>} />;
    }
    if (action === "columnTitle.filter") {
      return <Button {...props} children={<>Filter</>} />;
    }
    return <Button {...props} size="middle" />;
  },
  DatePicker: ({ props }) => {
    return (
      <DatePicker
        value={
          typeof props.value === "string" && props.value
            ? dayjs(props.value)
            : undefined
        }
        onChange={(value) => {
          props.onChange?.({
            target: {
              value: value?.format("YYYY-MM-DD") || "",
            },
          });
        }}
      />
    );
  },
  Dropdown: ({ props }) => {
    return (
      <Dropdown
        menu={{
          items: props.options,
        }}
        open={props.open}
        trigger={["click"]}
        children={<a onClick={(e) => e.preventDefault()}>{props.children}</a>}
        placement="bottomRight"
        destroyPopupOnHide
      />
    );
  },

  Input: ({ props: { value, ...props }, action }) => {
    if (action === "exportData.modal.checkBox") {
      return (
        <Checkbox
          checked={props.checked}
          onChange={(e) => {
            props.onChange?.(e);
          }}
        />
      );
    }
    return (
      <Input
        value={value}
        type={props.type}
        onChange={(e) => {
          props.onChange?.(e);
        }}
      />
    );
  },
  Radio: ({ props }) => <Radio {...props} />,
  Table: ({ props }) => {
    return (
      <Table
        dataSource={props.dataSource}
        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        //@ts-ignore
        columns={props.columns}
        loading={props.loading}
        scroll={{
          x: true,
        }}
      />
    );
  },
};

import { Col, DataTable, TableProvider } from "@xest-ui/data-table";
import getUsers from "@/services/users/getUsers";
// import "../styles/users-table.css";

interface User {
  user_id: string;
  first_name: string;
  last_name: string;
  email: string;
  created_at: string;
}
const Columns: Col<User>[] = [
  {
    dataIndex: "user_id",
    title: "User Id",
    width: 200,
    filterType: {
      dbCol: "users.user_id",
      type: "string",
    },
  },
  {
    dataIndex: "first_name",
    title: "First Name",
    width: 150,
    filterType: {
      dbCol: "users.first_name",
      type: "string",
    },
  },
  // Define other columns similarly
];

export const UsersTable = () => {
  return (
    <TableProvider
      params={{
        apiCallFn: async (queryparams: string) => {
          let data, error;
          await getUsers(queryparams)
            .then((res) => (data = res.data))
            .catch((err) => (error = err));
          console.log({ data, error });
          return { data, error };
        },
        deps: [],
        initialPageSize: 10,
        initialFilters: [],
        initialSortCriteria: null,
        config: {
          filtersKeyGen() {
            return "users-dt-filters";
          },
        },
      }}
      columns={Columns}
      components={DefaultTableComponents}
    >
      <DataTable pagination={false} />
    </TableProvider>
  );
};

Contributing

Contributions are welcome! Feel free to submit issues and pull requests.

License

This project is licensed under the MIT License.