styels added

master
mahdi 3 years ago
parent c1b186927c
commit 290eef8bb9
  1. 109
      src/components/ReactTable3/BasicTable.js
  2. 302
      src/components/ReactTable3/NOTUSINGBasicTableDefaultCode.js
  3. 66
      src/components/ReactTable3/index.js

@ -90,7 +90,47 @@ const BasicTable = () => {
return (
<>
<div>
<div className="flex flex-row items-center justify-between mb-3 mx-4">
{/* search box */}
<GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} />
{/* pagination */}
<div className="border border-blue-400 rounded p-1" style={{}}>
<button
className="rounded py-1 px-2 mx-1 text-xs"
style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
onClick={() => gotoPage(0)}
disabled={!canPreviousPage}
>
{"<<"}
</button>
<button
className="rounded py-1 px-2 mx-1 text-xs"
style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
onClick={() => previousPage()}
disabled={!canPreviousPage}
>
{"<"}
</button>
<button
className="rounded py-1 px-2 mx-1 text-xs"
style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
onClick={() => nextPage()}
disabled={!canNextPage}
>
{">"}
</button>
<button
className="rounded py-1 px-2 mx-1 text-xs"
style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
onClick={() => gotoPage(pageCount - 1)}
disabled={!canNextPage}
>
{">>"}
</button>
</div>
</div>
{/* toggle columns */}
{/* <div>
<div>
<Checkbox {...getToggleHideAllColumnsProps()} /> Toggle All
</div>
@ -102,11 +142,10 @@ const BasicTable = () => {
</label>
</div>
))}
</div>
</div> */}
<GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} />
<button onClick={changeOrder}> Change Column Order </button>
{/* Change Column Order */}
{/* <button onClick={changeOrder}> Change Column Order </button> */}
<table
{...getTableProps()}
@ -130,9 +169,6 @@ const BasicTable = () => {
: " 🔼"
: ""}
</span>
{/* <div>
{column.canFilter ? column.render('Filter') : null }
</div> */}
</th>
))}
</tr>
@ -143,18 +179,6 @@ const BasicTable = () => {
{...getTableBodyProps()}
className="bg-white divide-y divide-gray-200"
>
{/* {rows.map((row) => {
prepareRow(row)
return(
<tr {...row.getRowProps()}>
{row.cells.map((cell) => {
return <td {...cell.getCellProps()} className="px-4 py-4 whitespace-nowrap text-sm" role="cell" style={{color:'#00253A'}}>
{cell.render('Cell')}
</td>
})}
</tr>
)
})} */}
{page.map((row) => {
prepareRow(row);
return (
@ -174,26 +198,6 @@ const BasicTable = () => {
</tr>
);
})}
{/* {firstPageRows.map((row) => {
prepareRow(row);
return (
<tr {...row.getRowProps()}>
{row.cells.map((cell) => {
return (
<td
{...cell.getCellProps()}
className="px-4 py-4 whitespace-nowrap text-sm"
role="cell"
style={{ color: "#00253A" }}
>
{cell.render("Cell")}
</td>
);
})}
</tr>
);
})} */}
</tbody>
<tfoot
@ -261,31 +265,6 @@ const BasicTable = () => {
</option>
))}
</select>
<button onClick={() => gotoPage(0)} disabled={!canPreviousPage}>
{" "}
{"<<"}{" "}
</button>
<button
className="bg-blue-400 m-2 rounded text-white p-2"
onClick={() => previousPage()}
disabled={!canPreviousPage}
>
Previous
</button>
<button
className="bg-blue-400 m-2 rounded text-white p-2"
onClick={() => nextPage()}
disabled={!canNextPage}
>
Next
</button>
<button onClick={() => gotoPage(pageCount - 1)} disabled={!canNextPage}>
{" "}
{">>"}{" "}
</button>
</div>
</>
);

@ -0,0 +1,302 @@
import React, { useMemo } from "react";
import {
useTable,
useSortBy,
useGlobalFilter,
useFilters,
usePagination,
useRowSelect,
useColumnOrder,
} from "react-table";
import { COLUMNS } from "./columns";
import { GlobalFilter } from "./GlobalFilter";
import { Checkbox } from "./Checkbox";
import MOCK_DATA from "./MOCK_DATA.json";
const BasicTable = () => {
const columns = React.useMemo(() => COLUMNS, []);
const data = useMemo(() => MOCK_DATA, []);
const {
getTableProps,
getTableBodyProps,
headerGroups,
footerGroups,
rows,
page,
nextPage,
previousPage,
canNextPage,
canPreviousPage,
pageOptions,
gotoPage,
pageCount,
setPageSize,
prepareRow,
allColumns,
getToggleHideAllColumnsProps,
setColumnOrder,
selectedFlatRows,
state,
setGlobalFilter,
} = useTable(
{
columns,
data,
// initialState: { pageIndex: 2 }
},
useColumnOrder,
useFilters,
useGlobalFilter,
useSortBy,
usePagination,
useRowSelect,
(hooks) => {
hooks.visibleColumns.push((columns) => {
return [
{
id: "selection",
Header: ({ getToggleAllRowsSelectedProps }) => (
<Checkbox {...getToggleAllRowsSelectedProps()} />
),
Cell: ({ row }) => (
<Checkbox {...row.getToggleRowSelectedProps()} />
),
},
...columns,
];
});
}
);
const changeOrder = () => {
setColumnOrder([
"name",
"order-number",
"user-job",
"order-level",
"order-status",
"order-price",
]);
};
const { globalFilter, pageIndex, pageSize } = state;
// const firstPageRows = rows.slice(0, 10);
return (
<>
<div className="bg-yellow-500">
{/* search box */}
<GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} />
{/* pagination */}
</div>
{/* toggle columns */}
{/* <div>
<div>
<Checkbox {...getToggleHideAllColumnsProps()} /> Toggle All
</div>
{allColumns.map((column) => (
<div key={column.id}>
<label>
<input type="checkbox" {...column.getToggleHiddenProps()} />
{column.Header}
</label>
</div>
))}
</div> */}
{/* Change Column Order */}
{/* <button onClick={changeOrder}> Change Column Order </button> */}
<table
{...getTableProps()}
className="min-w-full divide-y divide-gray-200"
>
<thead className="bg-gray-300">
{headerGroups.map((headerGroup) => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
<th
{...column.getHeaderProps(column.getSortByToggleProps())}
scope="col"
className="cursor-pointer px-4 py-2 text-right text-xs"
style={{ color: "#3287B9" }}
>
{column.render("Header")}
<span>
{column.isSorted
? column.isSortedDesc
? " 🔽"
: " 🔼"
: ""}
</span>
{/* not using */}
{/* <div>
{column.canFilter ? column.render('Filter') : null }
</div> */}
</th>
))}
</tr>
))}
</thead>
<tbody
{...getTableBodyProps()}
className="bg-white divide-y divide-gray-200"
>
{/* not using */}
{/* {rows.map((row) => {
prepareRow(row)
return(
<tr {...row.getRowProps()}>
{row.cells.map((cell) => {
return <td {...cell.getCellProps()} className="px-4 py-4 whitespace-nowrap text-sm" role="cell" style={{color:'#00253A'}}>
{cell.render('Cell')}
</td>
})}
</tr>
)
})} */}
{page.map((row) => {
prepareRow(row);
return (
<tr {...row.getRowProps()}>
{row.cells.map((cell) => {
return (
<td
{...cell.getCellProps()}
className="px-4 py-4 whitespace-nowrap text-sm"
role="cell"
style={{ color: "#00253A" }}
>
{cell.render("Cell")}
</td>
);
})}
</tr>
);
})}
{/* not using */}
{/* {firstPageRows.map((row) => {
prepareRow(row);
return (
<tr {...row.getRowProps()}>
{row.cells.map((cell) => {
return (
<td
{...cell.getCellProps()}
className="px-4 py-4 whitespace-nowrap text-sm"
role="cell"
style={{ color: "#00253A" }}
>
{cell.render("Cell")}
</td>
);
})}
</tr>
);
})} */}
</tbody>
<tfoot
className={`bg-gray-300 ${rows.length > 10 ? "w-full" : "hidden"}`}
>
{footerGroups.map((footerGroup) => (
<tr {...footerGroup.getFooterGroupProps()}>
{footerGroup.headers.map((column) => (
<td
{...column.getFooterProps}
className="px-4 py-2 text-right text-xs"
style={{ color: "#3287B9" }}
>
{column.render("Footer")}
</td>
))}
</tr>
))}
</tfoot>
</table>
<pre>
<code>
{JSON.stringify(
{
selectedFlatRows: selectedFlatRows.map((row) => row.original),
},
null,
2
)}
</code>
</pre>
<div>
<span>
Page{" "}
<strong>
{pageIndex + 1} of {pageOptions.length}
</strong>
{""}
</span>
<span>
| Go to Page:{" "}
<input
type="number"
defaultValue={pageIndex + 1}
onChange={(e) => {
const pageNumber = e.target.value
? Number(e.target.value) - 1
: 0;
gotoPage(pageNumber);
}}
style={{ width: "50px" }}
/>
</span>
<select
value={pageSize}
onChange={(e) => setPageSize(Number(e.target.value))}
>
{[7, 10, 25, 50].map((pageSize) => (
<option key={pageSize} value={pageSize}>
Show {pageSize}
</option>
))}
</select>
<button onClick={() => gotoPage(0)} disabled={!canPreviousPage}>
{" "}
{"<<"}{" "}
</button>
<button
className="bg-blue-400 m-2 rounded text-white p-2"
onClick={() => previousPage()}
disabled={!canPreviousPage}
>
Previous
</button>
<button
className="bg-blue-400 m-2 rounded text-white p-2"
onClick={() => nextPage()}
disabled={!canNextPage}
>
Next
</button>
<button onClick={() => gotoPage(pageCount - 1)} disabled={!canNextPage}>
{" "}
{">>"}{" "}
</button>
</div>
</>
);
};
export default BasicTable;

@ -1,13 +1,73 @@
import React from "react";
import BasicTable from "./BasicTable";
const ReactTable3 = () => {
const ReactTable3 = ({ breadCrumbs, subTitle, title }) => {
return (
<div>
<div className="my-10 w-11/12 mx-auto bg-indigo-200">
{/* breadCrumb */}
<div className="flex flex-row items-center">
{breadCrumbs.map((breadCrumb, index) => (
<div className="flex flex-row items-center">
<span
className={`cursor-pointer text-xs hover:text-blue-900 ${
breadCrumb.active ? "text-blue-900" : "text-blue-400"
}`}
>
{breadCrumb.name}
</span>
{Number(index) !== breadCrumbs.length - 1 && (
<div
className={`mx-2 ${
breadCrumb.active ? "text-blue-900" : "text-blue-400"
}`}
>
{" > "}
</div>
)}
</div>
))}
</div>
<div className="my-7">
{/* page Title */}
<div className="flex flex-row items-center">
<div className="w-1 h-5 bg-blue-500 rounded ml-1"></div>
<h2 className="text-base text-blue-900">{title}</h2>
</div>
{/* page Title */}
<div className="flex flex-row items-center mt-4">
<div className="w-1 h-5 bg-gray-400 rounded ml-1"></div>
<h2 className="text-sm">{subTitle}</h2>
</div>
</div>
<BasicTable />
mahdi
</div>
);
};
export default ReactTable3;
ReactTable3.defaultProps = {
breadCrumbs: [
{
name: "صفحه اصلی",
active: false,
},
{
name: "آمار و گزارشات",
active: false,
},
{
name: "فروش محصولات",
active: false,
},
{
name: "سال 1400",
active: true,
},
],
title: "میزان فروش محصولات",
subTitle: "اطلاعات جداول مشخصاتی کارکنان مجموعه ایران تایر",
};

Loading…
Cancel
Save