parent
7426b944fb
commit
cd25e1e4ee
6 changed files with 0 additions and 409 deletions
@ -1,294 +0,0 @@ |
|||||||
import React from "react"; |
|
||||||
|
|
||||||
import { |
|
||||||
useTable, |
|
||||||
useGlobalFilter, |
|
||||||
useAsyncDebounce, |
|
||||||
useSortBy, |
|
||||||
usePagination, |
|
||||||
} from "react-table"; // new
|
|
||||||
|
|
||||||
import { |
|
||||||
ChevronDoubleLeftIcon, |
|
||||||
ChevronLeftIcon, |
|
||||||
ChevronRightIcon, |
|
||||||
ChevronDoubleRightIcon, |
|
||||||
} from "@heroicons/react/solid"; |
|
||||||
|
|
||||||
import { Button, PageButton } from "./shared/Button"; |
|
||||||
import { classNames } from "./shared/Utils"; |
|
||||||
import { SortIcon, SortUpIcon, SortDownIcon } from "./shared/Icons"; |
|
||||||
|
|
||||||
function GlobalFilter({ |
|
||||||
preGlobalFilteredRows, |
|
||||||
globalFilter, |
|
||||||
setGlobalFilter, |
|
||||||
}) { |
|
||||||
const count = preGlobalFilteredRows.length; |
|
||||||
const [value, setValue] = React.useState(globalFilter); |
|
||||||
const onChange = useAsyncDebounce((value) => { |
|
||||||
setGlobalFilter(value || undefined); |
|
||||||
}, 200); |
|
||||||
|
|
||||||
return ( |
|
||||||
<span> |
|
||||||
Search:{" "} |
|
||||||
<input |
|
||||||
value={value || ""} |
|
||||||
onChange={(e) => { |
|
||||||
setValue(e.target.value); |
|
||||||
onChange(e.target.value); |
|
||||||
}} |
|
||||||
placeholder={`${count} records...`} |
|
||||||
/> |
|
||||||
</span> |
|
||||||
); |
|
||||||
} |
|
||||||
|
|
||||||
// This is a custom filter UI for selecting
|
|
||||||
export function StatusPill({ value }) { |
|
||||||
// const status = value ? value.toLowerCase() : "unknown";
|
|
||||||
|
|
||||||
return ( |
|
||||||
// <span
|
|
||||||
// className={`p-4 whitespace-nowrap text-base font-light
|
|
||||||
// ${status ? "text-green-400" : "text-red-400"}`}
|
|
||||||
// // className={classNames(
|
|
||||||
// // "px-3 py-1 uppercase leading-wide font-bold text-xs rounded-full shadow-sm",
|
|
||||||
// // status ? "bg-green-600 text-green-800" : null,
|
|
||||||
// // status ? "bg-yellow-400 text-yellow-800" : null
|
|
||||||
// // )}
|
|
||||||
// >
|
|
||||||
// {/* {status} */}
|
|
||||||
// {status ? "فعال" : "غیر فعال"}
|
|
||||||
// </span>
|
|
||||||
<span |
|
||||||
className={`p-4 whitespace-nowrap text-base font-light
|
|
||||||
${value ? "text-green-400" : "text-red-400"}`}
|
|
||||||
> |
|
||||||
{value ? "فعال" : "غیر فعال"} |
|
||||||
</span> |
|
||||||
); |
|
||||||
console.log(value); |
|
||||||
} |
|
||||||
|
|
||||||
function Table({ columns, data }) { |
|
||||||
// Use the state and functions returned from useTable to build your UI
|
|
||||||
const { |
|
||||||
getTableProps, |
|
||||||
getTableBodyProps, |
|
||||||
headerGroups, |
|
||||||
rows, |
|
||||||
prepareRow, |
|
||||||
//new
|
|
||||||
page, // Instead of using 'rows', we'll use page,
|
|
||||||
// which has only the rows for the active page
|
|
||||||
|
|
||||||
// The rest of these things are super handy, too ;)
|
|
||||||
canPreviousPage, |
|
||||||
canNextPage, |
|
||||||
pageOptions, |
|
||||||
pageCount, |
|
||||||
gotoPage, |
|
||||||
nextPage, |
|
||||||
previousPage, |
|
||||||
setPageSize, |
|
||||||
|
|
||||||
state, // new
|
|
||||||
preGlobalFilteredRows, // new
|
|
||||||
setGlobalFilter, |
|
||||||
} = useTable( |
|
||||||
{ |
|
||||||
columns, |
|
||||||
data, |
|
||||||
}, |
|
||||||
useGlobalFilter, |
|
||||||
useSortBy, // new
|
|
||||||
usePagination |
|
||||||
); |
|
||||||
|
|
||||||
// Render the UI for your table
|
|
||||||
return ( |
|
||||||
<> |
|
||||||
<div className="sm:flex sm:gap-x-2"> |
|
||||||
<GlobalFilter |
|
||||||
preGlobalFilteredRows={preGlobalFilteredRows} |
|
||||||
globalFilter={state.globalFilter} |
|
||||||
setGlobalFilter={setGlobalFilter} |
|
||||||
/> |
|
||||||
{headerGroups.map((headerGroup) => |
|
||||||
headerGroup.headers.map((column) => |
|
||||||
column.Filter ? ( |
|
||||||
<div className="mt-2 sm:mt-0" key={column.id}> |
|
||||||
{column.render("Filter")} |
|
||||||
</div> |
|
||||||
) : null |
|
||||||
) |
|
||||||
)} |
|
||||||
</div> |
|
||||||
{/* table */} |
|
||||||
<div className="mt-4 flex flex-col"> |
|
||||||
<div className="-my-2 overflow-x-auto -mx-4 sm:-mx-6 lg:-mx-8"> |
|
||||||
<div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8"> |
|
||||||
<div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg"> |
|
||||||
<table |
|
||||||
{...getTableProps()} |
|
||||||
className="min-w-full divide-y divide-gray-200" |
|
||||||
> |
|
||||||
<thead className="bg-gray-50"> |
|
||||||
{headerGroups.map((headerGroup) => ( |
|
||||||
<tr {...headerGroup.getHeaderGroupProps()}> |
|
||||||
{headerGroup.headers.map((column) => ( |
|
||||||
// Add the sorting props to control sorting. For this example
|
|
||||||
// we can add them into the header props
|
|
||||||
<th |
|
||||||
scope="col" |
|
||||||
className="group px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" |
|
||||||
{...column.getHeaderProps( |
|
||||||
column.getSortByToggleProps() |
|
||||||
)} |
|
||||||
> |
|
||||||
<div className="flex items-center justify-between"> |
|
||||||
{column.render("Header")} |
|
||||||
{/* Add a sort direction indicator */} |
|
||||||
<span> |
|
||||||
{column.isSorted ? ( |
|
||||||
column.isSortedDesc ? ( |
|
||||||
<SortDownIcon className="w-4 h-4 text-gray-400" /> |
|
||||||
) : ( |
|
||||||
<SortUpIcon className="w-4 h-4 text-gray-400" /> |
|
||||||
) |
|
||||||
) : ( |
|
||||||
<SortIcon className="w-4 h-4 text-gray-400 opacity-0 group-hover:opacity-100" /> |
|
||||||
)} |
|
||||||
</span> |
|
||||||
</div> |
|
||||||
</th> |
|
||||||
))} |
|
||||||
</tr> |
|
||||||
))} |
|
||||||
</thead> |
|
||||||
<tbody |
|
||||||
{...getTableBodyProps()} |
|
||||||
className="bg-white divide-y divide-gray-200" |
|
||||||
> |
|
||||||
{page.map((row, i) => { |
|
||||||
// new
|
|
||||||
prepareRow(row); |
|
||||||
return ( |
|
||||||
<tr {...row.getRowProps()}> |
|
||||||
{row.cells.map((cell) => { |
|
||||||
return ( |
|
||||||
<td |
|
||||||
{...cell.getCellProps()} |
|
||||||
className="px-6 py-4 whitespace-nowrap" |
|
||||||
role="cell" |
|
||||||
> |
|
||||||
{cell.column.Cell.name === "defaultRenderer" ? ( |
|
||||||
<div className="text-sm text-gray-500"> |
|
||||||
{cell.render("Cell")} |
|
||||||
</div> |
|
||||||
) : ( |
|
||||||
cell.render("Cell") |
|
||||||
)} |
|
||||||
</td> |
|
||||||
); |
|
||||||
})} |
|
||||||
</tr> |
|
||||||
); |
|
||||||
})} |
|
||||||
</tbody> |
|
||||||
</table> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
{/* Pagination */} |
|
||||||
<div className="py-3 flex items-center justify-between"> |
|
||||||
<div className="flex-1 flex justify-between sm:hidden"> |
|
||||||
<Button onClick={() => previousPage()} disabled={!canPreviousPage}> |
|
||||||
Previous |
|
||||||
</Button> |
|
||||||
<Button onClick={() => nextPage()} disabled={!canNextPage}> |
|
||||||
Next |
|
||||||
</Button> |
|
||||||
</div> |
|
||||||
<div className="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between"> |
|
||||||
{/* pagintaion */} |
|
||||||
<div className="flex gap-x-2 items-baseline"> |
|
||||||
<span className="text-sm text-gray-700"> |
|
||||||
صفحه <span className="font-medium">{state.pageIndex + 1}</span> از{" "} |
|
||||||
<span className="font-medium">{pageOptions.length}</span> |
|
||||||
</span> |
|
||||||
<label> |
|
||||||
<span className="sr-only">ایتم های صفحه</span> |
|
||||||
<select |
|
||||||
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" |
|
||||||
value={state.pageSize} |
|
||||||
onChange={(e) => { |
|
||||||
setPageSize(Number(e.target.value)); |
|
||||||
}} |
|
||||||
> |
|
||||||
{[5, 10, 20].map((pageSize) => ( |
|
||||||
<option key={pageSize} value={pageSize}> |
|
||||||
نمایش {pageSize} |
|
||||||
</option> |
|
||||||
))} |
|
||||||
</select> |
|
||||||
</label> |
|
||||||
</div> |
|
||||||
{/* arrows */} |
|
||||||
<div> |
|
||||||
<nav |
|
||||||
className="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" |
|
||||||
aria-label="Pagination" |
|
||||||
> |
|
||||||
<PageButton |
|
||||||
className="rounded-r-md" |
|
||||||
onClick={() => gotoPage(pageCount - 1)} |
|
||||||
disabled={!canNextPage} |
|
||||||
> |
|
||||||
<span className="sr-only">Last</span> |
|
||||||
<ChevronDoubleRightIcon |
|
||||||
className="h-5 w-5 text-gray-400" |
|
||||||
aria-hidden="true" |
|
||||||
/> |
|
||||||
</PageButton> |
|
||||||
<PageButton onClick={() => nextPage()} disabled={!canNextPage}> |
|
||||||
<span className="sr-only">Next</span> |
|
||||||
<ChevronRightIcon |
|
||||||
className="h-5 w-5 text-gray-400" |
|
||||||
aria-hidden="true" |
|
||||||
/> |
|
||||||
</PageButton> |
|
||||||
|
|
||||||
<PageButton |
|
||||||
onClick={() => previousPage()} |
|
||||||
disabled={!canPreviousPage} |
|
||||||
> |
|
||||||
<span className="sr-only">Previous</span> |
|
||||||
<ChevronLeftIcon |
|
||||||
className="h-5 w-5 text-gray-400" |
|
||||||
aria-hidden="true" |
|
||||||
/> |
|
||||||
</PageButton> |
|
||||||
<PageButton |
|
||||||
className="rounded-l-md" |
|
||||||
onClick={() => gotoPage(0)} |
|
||||||
disabled={!canPreviousPage} |
|
||||||
> |
|
||||||
<span className="sr-only">First</span> |
|
||||||
<ChevronDoubleLeftIcon |
|
||||||
className="h-5 w-5 text-gray-400" |
|
||||||
aria-hidden="true" |
|
||||||
/> |
|
||||||
</PageButton> |
|
||||||
</nav> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</> |
|
||||||
); |
|
||||||
} |
|
||||||
|
|
||||||
export default Table; |
|
||||||
@ -1,58 +0,0 @@ |
|||||||
import React from "react"; |
|
||||||
import Table, { AvatarCell, SelectColumnFilter, StatusPill } from "./Table"; // new
|
|
||||||
|
|
||||||
const getData = () => { |
|
||||||
const data = [ |
|
||||||
{ |
|
||||||
name: "مایکروویر سامسونگ مدل ", |
|
||||||
status: true, |
|
||||||
date: "1400 / 09 / 21", |
|
||||||
price: 20000, |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: "مایکروویر سامسونگ مدل ", |
|
||||||
status: false, |
|
||||||
date: "1400 / 09 / 21", |
|
||||||
price: 20000, |
|
||||||
}, |
|
||||||
]; |
|
||||||
return [...data, ...data, ...data]; |
|
||||||
}; |
|
||||||
|
|
||||||
function ReactTable() { |
|
||||||
const columns = React.useMemo( |
|
||||||
() => [ |
|
||||||
{ |
|
||||||
Header: "عنوان", |
|
||||||
accessor: "name", |
|
||||||
}, |
|
||||||
{ |
|
||||||
Header: "وضعیت", |
|
||||||
accessor: "status", |
|
||||||
}, |
|
||||||
{ |
|
||||||
Header: "تاریخ", |
|
||||||
accessor: "date", |
|
||||||
}, |
|
||||||
{ |
|
||||||
Header: "مبلغ پرداختی", |
|
||||||
accessor: "price", |
|
||||||
}, |
|
||||||
], |
|
||||||
[] |
|
||||||
); |
|
||||||
|
|
||||||
const data = React.useMemo(() => getData(), []); |
|
||||||
|
|
||||||
return ( |
|
||||||
<div className="min-h-screen bg-gray-100 text-gray-900"> |
|
||||||
<main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 pt-4"> |
|
||||||
<div className="mt-4"> |
|
||||||
<Table columns={columns} data={data} /> |
|
||||||
</div> |
|
||||||
</main> |
|
||||||
</div> |
|
||||||
); |
|
||||||
} |
|
||||||
|
|
||||||
export default ReactTable; |
|
||||||
@ -1,35 +0,0 @@ |
|||||||
import React from 'react' |
|
||||||
import { classNames } from './Utils' |
|
||||||
|
|
||||||
export function Button({ children, className, ...rest }) { |
|
||||||
return ( |
|
||||||
<button |
|
||||||
type="button" |
|
||||||
className={ |
|
||||||
classNames( |
|
||||||
"relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50", |
|
||||||
className |
|
||||||
)} |
|
||||||
{...rest} |
|
||||||
> |
|
||||||
{children} |
|
||||||
</button> |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
export function PageButton({ children, className, ...rest }) { |
|
||||||
return ( |
|
||||||
<button |
|
||||||
type="button" |
|
||||||
className={ |
|
||||||
classNames( |
|
||||||
"relative inline-flex items-center px-2 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50", |
|
||||||
className |
|
||||||
)} |
|
||||||
{...rest} |
|
||||||
> |
|
||||||
{children} |
|
||||||
</button> |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
@ -1,17 +0,0 @@ |
|||||||
export function SortIcon({ className }) { |
|
||||||
return ( |
|
||||||
<svg className={className} stroke="currentColor" fill="currentColor" strokeWidth="0" viewBox="0 0 320 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41zm255-105L177 64c-9.4-9.4-24.6-9.4-33.9 0L24 183c-15.1 15.1-4.4 41 17 41h238c21.4 0 32.1-25.9 17-41z"></path></svg> |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
export function SortUpIcon({ className }) { |
|
||||||
return ( |
|
||||||
<svg className={className} stroke="currentColor" fill="currentColor" strokeWidth="0" viewBox="0 0 320 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M279 224H41c-21.4 0-32.1-25.9-17-41L143 64c9.4-9.4 24.6-9.4 33.9 0l119 119c15.2 15.1 4.5 41-16.9 41z"></path></svg> |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
export function SortDownIcon({ className }) { |
|
||||||
return ( |
|
||||||
<svg className={className} stroke="currentColor" fill="currentColor" strokeWidth="0" viewBox="0 0 320 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41z"></path></svg> |
|
||||||
) |
|
||||||
} |
|
||||||
@ -1,3 +0,0 @@ |
|||||||
export function classNames(...classes) { |
|
||||||
return classes.filter(Boolean).join(" "); |
|
||||||
} |
|
||||||
Loading…
Reference in new issue