diff --git a/src/App.js b/src/App.js index fcba004..03f6f75 100644 --- a/src/App.js +++ b/src/App.js @@ -82,7 +82,7 @@ function App() { {/* */} {/* */} {/* */} - + {/* */} {/* */} {/* */} {/* */} diff --git a/src/components/ReactTable3/BasicTable.js b/src/components/ReactTable3/BasicTable.js index 3f3459a..20f8c9c 100644 --- a/src/components/ReactTable3/BasicTable.js +++ b/src/components/ReactTable3/BasicTable.js @@ -8,6 +8,7 @@ import { usePagination, useRowSelect, useColumnOrder, + useResizeColumns } from "react-table"; import { COLUMNS } from "./columns"; @@ -48,6 +49,7 @@ const BasicTable = () => { selectedFlatRows, state, setGlobalFilter, + resetResizing, } = useTable( { columns, @@ -183,7 +185,7 @@ const BasicTable = () => { > {headerGroups.map((headerGroup) => ( - + {headerGroup.headers.map((column) => ( { : ""} + ))} ))} @@ -219,7 +222,7 @@ const BasicTable = () => { return ( diff --git a/src/components/ReactTable3/Buttons.js b/src/components/ReactTable3/Buttons.js new file mode 100644 index 0000000..6ec1540 --- /dev/null +++ b/src/components/ReactTable3/Buttons.js @@ -0,0 +1,16 @@ +import arrowIcon from './arrow-icon.svg'; +import more from './more.svg'; +import edit from './edit.svg'; + + + +export function Buttons({ }) { + return ( +
+ +
+ ); + } diff --git a/src/components/ReactTable3/EditButtons.js b/src/components/ReactTable3/EditButtons.js new file mode 100644 index 0000000..f9db659 --- /dev/null +++ b/src/components/ReactTable3/EditButtons.js @@ -0,0 +1,9 @@ +export function EditButtons({ }) { + return ( +
+ + + +
+ ); + } diff --git a/src/components/ReactTable3/arrow-icon.svg b/src/components/ReactTable3/arrow-icon.svg new file mode 100644 index 0000000..589a9ba --- /dev/null +++ b/src/components/ReactTable3/arrow-icon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/components/ReactTable3/columns.js b/src/components/ReactTable3/columns.js index 1c9e408..f24cde1 100644 --- a/src/components/ReactTable3/columns.js +++ b/src/components/ReactTable3/columns.js @@ -6,6 +6,8 @@ import { ColumnFilter } from "./ColumnFilter"; import { OrderStatus } from "./OrderStatus"; import { OrderLevel } from "./OrderLevel"; +import { Buttons } from "./Buttons"; +import { EditButtons } from "./EditButtons"; export const COLUMNS = [ { @@ -50,4 +52,10 @@ export const COLUMNS = [ accessor: "order-level", Cell: OrderLevel, }, + { + Header: EditButtons, + Footer: "ویرایش", + accessor: "edit", + Cell: Buttons, + }, ]; diff --git a/src/components/ReactTable3/edit.svg b/src/components/ReactTable3/edit.svg new file mode 100644 index 0000000..85f109e --- /dev/null +++ b/src/components/ReactTable3/edit.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/components/ReactTable3/more.svg b/src/components/ReactTable3/more.svg new file mode 100644 index 0000000..884c0af --- /dev/null +++ b/src/components/ReactTable3/more.svg @@ -0,0 +1,8 @@ + + + + + + + +