master
mahdi andalib 3 years ago
parent 7b8a4ae1b2
commit 2f766ce526
  1. 2
      src/App.js
  2. 7
      src/components/ReactTable3/BasicTable.js
  3. 16
      src/components/ReactTable3/Buttons.js
  4. 9
      src/components/ReactTable3/EditButtons.js
  5. 6
      src/components/ReactTable3/arrow-icon.svg
  6. 8
      src/components/ReactTable3/columns.js
  7. 6
      src/components/ReactTable3/edit.svg
  8. 8
      src/components/ReactTable3/more.svg

@ -82,7 +82,7 @@ function App() {
{/* <AdvertisementDesign3 /> */} {/* <AdvertisementDesign3 /> */}
{/* <CourseChapter /> */} {/* <CourseChapter /> */}
{/* <SidebarMenu /> */} {/* <SidebarMenu /> */}
<SidebarDesign2 /> {/* <SidebarDesign2 /> */}
{/* <SimpleBarChart /> */} {/* <SimpleBarChart /> */}
{/* <SpecifiedDomainRadarChart /> */} {/* <SpecifiedDomainRadarChart /> */}
{/* <Design1 /> */} {/* <Design1 /> */}

@ -8,6 +8,7 @@ import {
usePagination, usePagination,
useRowSelect, useRowSelect,
useColumnOrder, useColumnOrder,
useResizeColumns
} from "react-table"; } from "react-table";
import { COLUMNS } from "./columns"; import { COLUMNS } from "./columns";
@ -48,6 +49,7 @@ const BasicTable = () => {
selectedFlatRows, selectedFlatRows,
state, state,
setGlobalFilter, setGlobalFilter,
resetResizing,
} = useTable( } = useTable(
{ {
columns, columns,
@ -183,7 +185,7 @@ const BasicTable = () => {
> >
<thead className="" style={{ backgroundColor: "#F3F8FF" }}> <thead className="" style={{ backgroundColor: "#F3F8FF" }}>
{headerGroups.map((headerGroup) => ( {headerGroups.map((headerGroup) => (
<tr {...headerGroup.getHeaderGroupProps()}> <tr {...headerGroup.getHeaderGroupProps()} >
{headerGroup.headers.map((column) => ( {headerGroup.headers.map((column) => (
<th <th
{...column.getHeaderProps(column.getSortByToggleProps())} {...column.getHeaderProps(column.getSortByToggleProps())}
@ -200,6 +202,7 @@ const BasicTable = () => {
: ""} : ""}
</span> </span>
</th> </th>
))} ))}
</tr> </tr>
))} ))}
@ -219,7 +222,7 @@ const BasicTable = () => {
return ( return (
<td <td
{...cell.getCellProps()} {...cell.getCellProps()}
className="p-4 whitespace-nowrap text-sm" className="p-4 whitespace-nowrap text-xs"
role="cell" role="cell"
style={{ color: "#00253A" }} style={{ color: "#00253A" }}
> >

@ -0,0 +1,16 @@
import arrowIcon from './arrow-icon.svg';
import more from './more.svg';
import edit from './edit.svg';
export function Buttons({ }) {
return (
<div className=" flex flex-row items-center">
<button className="flex flex-row items-center justify-around p-2 rounded border">
جزیات
<img src={arrowIcon} alt="" className="w-3 cursor-pointer mr-2" />
</button>
</div>
);
}

@ -0,0 +1,9 @@
export function EditButtons({ }) {
return (
<div className="bg-red-600 flex flex-row items-center">
<button>جزیات</button>
<button>جزیات</button>
<button>جزیات</button>
</div>
);
}

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15">
<g id="arrow-down" transform="translate(0)">
<path id="Vector" d="M9.9,0,5.825,4.075a1.241,1.241,0,0,1-1.75,0L0,0" transform="translate(2.55 5.594)" fill="none" stroke="rgba(0,37,58,0.32)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M0,0H15V15H0Z" transform="translate(15 15) rotate(180)" fill="none" opacity="0"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 489 B

@ -6,6 +6,8 @@ import { ColumnFilter } from "./ColumnFilter";
import { OrderStatus } from "./OrderStatus"; import { OrderStatus } from "./OrderStatus";
import { OrderLevel } from "./OrderLevel"; import { OrderLevel } from "./OrderLevel";
import { Buttons } from "./Buttons";
import { EditButtons } from "./EditButtons";
export const COLUMNS = [ export const COLUMNS = [
{ {
@ -50,4 +52,10 @@ export const COLUMNS = [
accessor: "order-level", accessor: "order-level",
Cell: OrderLevel, Cell: OrderLevel,
}, },
{
Header: EditButtons,
Footer: "ویرایش",
accessor: "edit",
Cell: Buttons,
},
]; ];

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16.715" height="16.703" viewBox="0 0 16.715 16.703">
<g id="edit" transform="translate(-626.295 -252.999)">
<path id="Vector" d="M8.991,1.271l-7.88,7.88a2.712,2.712,0,0,0-.66,1.32l-.43,3.01a1.424,1.424,0,0,0,1.7,1.7l3.01-.43a2.8,2.8,0,0,0,1.32-.66l7.88-7.88c1.36-1.36,2-2.94,0-4.94S10.351-.089,8.991,1.271Z" transform="translate(627.049 253.749)" fill="none" stroke="#00253a" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M0,0A7.144,7.144,0,0,0,4.94,4.94" transform="translate(634.91 256.15)" fill="none" stroke="#00253a" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 725 B

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g id="more" transform="translate(-556 -188)">
<path id="Vector" d="M2,0A2,2,0,1,0,4,2,2.006,2.006,0,0,0,2,0Z" transform="translate(559 198)" fill="#6397b5"/>
<path id="Vector-2" data-name="Vector" d="M2,0A2,2,0,1,0,4,2,2.006,2.006,0,0,0,2,0Z" transform="translate(573 198)" fill="#6397b5"/>
<path id="Vector-3" data-name="Vector" d="M2,0A2,2,0,1,0,4,2,2.006,2.006,0,0,0,2,0Z" transform="translate(566 198)" fill="#6397b5"/>
<path id="Vector-4" data-name="Vector" d="M0,0H24V24H0Z" transform="translate(556 188)" fill="#6397b5" opacity="0"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 658 B

Loading…
Cancel
Save