@xest-ui/data-table v1.2.25

@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.

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",
    },
  {
    dataIndex: "Role",
    title: "role",
    width: 150,
    filterType: {
      dbCol: "users.role",
      type: "options",
      options: [
        {
          label: 'Admin',
          value: 'admin'
        }
        ,{
          label: 'Sales',
          value: 'sales'
        }
      ]
    },
  },
  // 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. You could follow the following guidelines to get you running locally and test

This project is licensed under the MIT License.