import React, { useMemo } from "react";
import {
useTable,
useSortBy,
useGlobalFilter,
useFilters,
usePagination,
useRowSelect,
useColumnOrder,
} from "react-table";
import { COLUMNS } from "./columns";
import { GlobalFilter } from "./GlobalFilter";
import { Checkbox } from "./Checkbox";
import MOCK_DATA from "./MOCK_DATA.json";
export function StatusPill({ value }) {
return (
{(() => {
if (value === 1) {
return (
ارسال شده
);
} else if (value === 2) {
return (
رسیدگی
);
} else if (value === 3) {
return (
لغو شده
);
} else if (value === 4) {
return (
پیگیری
);
} else {
return (
خطری
);
}
})()}{" "}
);
}
// style={
// count > -1
// ? count === 0
// ? { color: "gray" }
// : { color: "green" }
// : { color: "red" }
// }
const BasicTable = () => {
const columns = React.useMemo(() => COLUMNS, []);
const data = useMemo(() => MOCK_DATA, []);
const {
getTableProps,
getTableBodyProps,
headerGroups,
footerGroups,
rows,
page,
nextPage,
previousPage,
canNextPage,
canPreviousPage,
pageOptions,
gotoPage,
pageCount,
setPageSize,
prepareRow,
allColumns,
getToggleHideAllColumnsProps,
setColumnOrder,
selectedFlatRows,
state,
setGlobalFilter,
} = useTable(
{
columns,
data,
// initialState: { pageIndex: 2 }
},
useColumnOrder,
useFilters,
useGlobalFilter,
useSortBy,
usePagination,
useRowSelect,
(hooks) => {
hooks.visibleColumns.push((columns) => {
return [
{
id: "selection",
Header: ({ getToggleAllRowsSelectedProps }) => (
),
Cell: ({ row }) => (
),
},
...columns,
];
});
}
);
const changeOrder = () => {
setColumnOrder([
"name",
"order-number",
"user-job",
"order-level",
"order-status",
"order-price",
]);
};
const { globalFilter, pageIndex, pageSize } = state;
// const firstPageRows = rows.slice(0, 10);
console.log(rows.length);
return (
<>
{/* search box */}
{/* pagination */}
{/* go to page */}
{
const pageNumber = e.target.value
? Number(e.target.value) - 1
: 0;
gotoPage(pageNumber);
}}
style={{ width: "50px" }}
/>
{" "}
برو به صفحه{" "}
{/* */}
{/* arrows */}
{/* */}
{/* toggle columns */}
{/*
Toggle All
{allColumns.map((column) => (
))}
*/}
{/* Change Column Order */}
{/* */}
{headerGroups.map((headerGroup) => (
{headerGroup.headers.map((column) => (
{column.render("Header")}
{column.isSorted
? column.isSortedDesc
? " 🔽"
: " 🔼"
: ""}
|
))}
))}
{page.map((row) => {
prepareRow(row);
return (
{row.cells.map((cell) => {
return (
{cell.render("Cell")}
|
);
})}
);
})}
10 ? "w-full" : "hidden"}`}
>
{footerGroups.map((footerGroup) => (
{footerGroup.headers.map((column) => (
{column.render("Footer")}
|
))}
))}
{/*
{JSON.stringify(
{
selectedFlatRows: selectedFlatRows.map((row) => row.original),
},
null,
2
)}
*/}
صفحه{" "}
{pageIndex + 1} از {pageOptions.length}
{""}
>
);
};
export default BasicTable;