update table added

master
mahdi 3 years ago
parent cf2e2d8854
commit 7426b944fb
  1. 15
      src/components/ReactTable2/Table.js
  2. 12
      src/components/ReactTable2/index.js

@ -151,23 +151,23 @@ function Table({ columns, data }) {
// we can add them into the header props // we can add them into the header props
<th <th
scope="col" scope="col"
className="group px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" className="px-6 py-3 text-xs text-blue-600 bg-gray-200"
{...column.getHeaderProps( {...column.getHeaderProps(
column.getSortByToggleProps() column.getSortByToggleProps()
)} )}
> >
<div className="flex items-center justify-between"> <div className="flex items-center">
{column.render("Header")} {column.render("Header")}
{/* Add a sort direction indicator */} {/* Add a sort direction indicator */}
<span> <span>
{column.isSorted ? ( {column.isSorted ? (
column.isSortedDesc ? ( column.isSortedDesc ? (
<SortDownIcon className="w-4 h-4 text-gray-400" /> <SortUpIcon className="w-4 h-4 text-gray-400 mr-1" />
) : ( ) : (
<SortUpIcon className="w-4 h-4 text-gray-400" /> <SortDownIcon className="w-4 h-4 text-gray-400 mr-1" />
) )
) : ( ) : (
<SortIcon className="w-4 h-4 text-gray-400 opacity-0 group-hover:opacity-100" /> <SortIcon className="w-4 h-4 text-gray-400 opacity-0 group-hover:opacity-100 mr-1" />
)} )}
</span> </span>
</div> </div>
@ -225,8 +225,9 @@ function Table({ columns, data }) {
{/* numbers */} {/* numbers */}
<div className="flex gap-x-2 items-baseline"> <div className="flex gap-x-2 items-baseline">
<span className="text-sm text-gray-700"> <span className="text-sm text-gray-700">
صفحه <span className="font-medium">{state.pageIndex + 1}</span> از صفحه <span className="font-medium"> {state.pageIndex + 1} </span>
<span className="font-medium">{pageOptions.length}</span> از
<span className="font-medium"> {pageOptions.length} </span>
</span> </span>
<label> <label>
<span className="sr-only">ایتم های موجود در هر صفحه</span> <span className="sr-only">ایتم های موجود در هر صفحه</span>

@ -7,7 +7,7 @@ const getData = () => {
name: "مایکروویر سامسونگ مدل ", name: "مایکروویر سامسونگ مدل ",
// email: "jane.cooper@example.com", // email: "jane.cooper@example.com",
status: true, status: true,
date: "1400/09/21", date: "1399/09/21",
price: 20000, price: 20000,
// imgUrl: // imgUrl:
// "https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60", // "https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60",
@ -15,31 +15,31 @@ const getData = () => {
{ {
name: "آزمون آنلاین درس علوم تجربی ", name: "آزمون آنلاین درس علوم تجربی ",
status: false, status: false,
date: "1400/09/21", date: "1399/09/23",
price: 18000, price: 18000,
}, },
{ {
name: "مایکروویر سامسونگ مدل ", name: "مایکروویر سامسونگ مدل ",
status: true, status: true,
date: "1400/09/21", date: "1392/09/21",
price: 20000, price: 20000,
}, },
{ {
name: "آزمون آنلاین درس علوم تجربی ", name: "آزمون آنلاین درس علوم تجربی ",
status: false, status: false,
date: "1400/09/21", date: "1375/09/21",
price: 18000, price: 18000,
}, },
{ {
name: "مایکروویر سامسونگ مدل ", name: "مایکروویر سامسونگ مدل ",
status: true, status: true,
date: "1400/09/21", date: "1360/09/21",
price: 27000000, price: 27000000,
}, },
{ {
name: "آزمون آنلاین درس علوم تجربی ", name: "آزمون آنلاین درس علوم تجربی ",
status: false, status: false,
date: "1400/09/21", date: "1404/09/21",
price: 1000, price: 1000,
}, },
]; ];

Loading…
Cancel
Save