@xest-ui/data-table
v1.2.24
Published
## Description
Downloads
143
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",
},
{
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.