|
|
|
|
@ -8,6 +8,7 @@ import { |
|
|
|
|
usePagination, |
|
|
|
|
useRowSelect, |
|
|
|
|
useColumnOrder, |
|
|
|
|
useExpanded, |
|
|
|
|
useResizeColumns |
|
|
|
|
} from "react-table"; |
|
|
|
|
|
|
|
|
|
@ -16,7 +17,67 @@ import { GlobalFilter } from "./GlobalFilter"; |
|
|
|
|
import { Checkbox } from "./Checkbox"; |
|
|
|
|
import MOCK_DATA from "./MOCK_DATA.json"; |
|
|
|
|
|
|
|
|
|
// This is a custom filter UI for selecting
|
|
|
|
|
// a unique option from a list
|
|
|
|
|
export function SelectColumnFilter({ |
|
|
|
|
column: { filterValue, setFilter, preFilteredRows, id, render }, |
|
|
|
|
}) { |
|
|
|
|
|
|
|
|
|
const options = React.useMemo(() => { |
|
|
|
|
const options = new Set() |
|
|
|
|
preFilteredRows.forEach(row => { |
|
|
|
|
options.add(row.values[id]) |
|
|
|
|
}) |
|
|
|
|
return [...options.values()] |
|
|
|
|
}, [id, preFilteredRows]) |
|
|
|
|
|
|
|
|
|
// Render a multi-select box
|
|
|
|
|
return ( |
|
|
|
|
<label className="flex gap-x-2 items-baseline"> |
|
|
|
|
<span className="text-gray-700">{render("Header")}: </span> |
|
|
|
|
<select |
|
|
|
|
className="rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" |
|
|
|
|
name={id} |
|
|
|
|
id={id} |
|
|
|
|
value={filterValue} |
|
|
|
|
onChange={e => { |
|
|
|
|
setFilter(e.target.value || undefined) |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
<option value="">همه</option> |
|
|
|
|
{options.map((option, i) => ( |
|
|
|
|
<option key={i} value={option} className="text-xs"> |
|
|
|
|
{(() => { |
|
|
|
|
if (option === 1) { |
|
|
|
|
return ( |
|
|
|
|
"وضعیت عادی" |
|
|
|
|
); |
|
|
|
|
} else if (option === 2) { |
|
|
|
|
return ( |
|
|
|
|
"اعلان سطح هشدار" |
|
|
|
|
); |
|
|
|
|
} else if (option === 3) { |
|
|
|
|
return ( |
|
|
|
|
"بررسی و پیگیری" |
|
|
|
|
); |
|
|
|
|
} else if (option === 4) { |
|
|
|
|
return ( |
|
|
|
|
"وضعیت بحرانی" |
|
|
|
|
); |
|
|
|
|
} else { |
|
|
|
|
return ( |
|
|
|
|
" وضعیت پایدار" |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
})()}{" "} |
|
|
|
|
|
|
|
|
|
</option> |
|
|
|
|
))} |
|
|
|
|
|
|
|
|
|
</select> |
|
|
|
|
</label> |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const BasicTable = () => { |
|
|
|
|
const columns = React.useMemo(() => COLUMNS, []); |
|
|
|
|
@ -58,6 +119,7 @@ const BasicTable = () => { |
|
|
|
|
useFilters, |
|
|
|
|
useGlobalFilter, |
|
|
|
|
useSortBy, |
|
|
|
|
useExpanded, |
|
|
|
|
usePagination, |
|
|
|
|
useRowSelect, |
|
|
|
|
(hooks) => { |
|
|
|
|
@ -94,18 +156,27 @@ const BasicTable = () => { |
|
|
|
|
console.log(rows.length); |
|
|
|
|
return ( |
|
|
|
|
<> |
|
|
|
|
{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 className="flex flex-row items-center justify-between mb-3 mx-4"> |
|
|
|
|
{/* search box */} |
|
|
|
|
<GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} /> |
|
|
|
|
{/* pagination */} |
|
|
|
|
<div |
|
|
|
|
{/* search box */} |
|
|
|
|
<GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} /> |
|
|
|
|
{/* pagination */} |
|
|
|
|
<div |
|
|
|
|
className="border border-blue-400 rounded-sm py-1 px-2 flex flex-items-center" |
|
|
|
|
style={{}} |
|
|
|
|
> |
|
|
|
|
{/* go to page */} |
|
|
|
|
<div> |
|
|
|
|
<input |
|
|
|
|
className="ml-1 text-xs p-1" |
|
|
|
|
className="ml-1 text-xs p-1 rounded border-blue-400" |
|
|
|
|
type="number" |
|
|
|
|
defaultValue={pageIndex + 1} |
|
|
|
|
onChange={(e) => { |
|
|
|
|
@ -156,7 +227,8 @@ const BasicTable = () => { |
|
|
|
|
> |
|
|
|
|
{">>"} |
|
|
|
|
</button> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
{/* */} |
|
|
|
|
{/* toggle columns */} |
|
|
|
|
@ -198,7 +270,6 @@ const BasicTable = () => { |
|
|
|
|
: ""} |
|
|
|
|
</span> |
|
|
|
|
</th> |
|
|
|
|
|
|
|
|
|
))} |
|
|
|
|
</tr> |
|
|
|
|
))} |
|
|
|
|
|
