@xest-ui/data-table
v1.1.15
Published
## Description
Downloads
269
Readme
@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",
},
},
// 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.