master
mahdi andalib 3 years ago
parent 89a020e80f
commit 6df048c3b3
  1. 2
      src/App.js
  2. 70
      src/components/ReactTable5/BasicTable.js
  3. 8
      src/components/ReactTable5/COLUMNS.js
  4. 33
      src/components/ReactTable5/Checkbox.js

@ -101,7 +101,7 @@ function App() {
{/* <TableDesign1 /> */} {/* <TableDesign1 /> */}
{/* <ReactTable2 /> */} {/* <ReactTable2 /> */}
{/* <ReactTable3 /> */} {/* <ReactTable3 /> */}
<ReactTable4 /> {/* <ReactTable4 /> */}
<ReactTable5 /> <ReactTable5 />
{/* <Digikala /> */} {/* <Digikala /> */}
{/* <HeaderDesign1 /> {/* <HeaderDesign1 />

@ -34,10 +34,6 @@ import {
} from "react-table"; } from "react-table";
import ButtonNewDesign from "../ButtonNewDesign"; import ButtonNewDesign from "../ButtonNewDesign";
export function CheckBox({}) {
return <input type="checkbox" className="cursor-pointer" />;
}
export const SelectColumnFilter = ({ export const SelectColumnFilter = ({
column: { filterValue, setFilter, preFilteredRows, id, render }, column: { filterValue, setFilter, preFilteredRows, id, render },
}) => { }) => {
@ -109,33 +105,6 @@ const BasicTable = ({
}) => { }) => {
const data = useMemo(() => MOCK_DATA2, []); const data = useMemo(() => MOCK_DATA2, []);
// console.log(data); // console.log(data);
// console.log(MOCK_DATA2);
const EditableCell = ({
value: initialValue,
row: { index },
column: { id },
updateMyData, // This is a custom function that we supplied to our table instance
}) => {
// We need to keep and update the state of the cell normally
const [value, setValue] = React.useState(initialValue);
const onChange = (e) => {
setValue(e.target.value);
};
// We'll only update the external data when the input is blurred
const onBlur = () => {
updateMyData(index, id, value);
};
// If the initialValue is changed external, sync it up with our state
React.useEffect(() => {
setValue(initialValue);
}, [initialValue]);
return <input value={value} onChange={onChange} onBlur={onBlur} />;
};
const [filtering, setFiltering] = useState(false); const [filtering, setFiltering] = useState(false);
@ -187,23 +156,6 @@ const BasicTable = ({
useExpanded, useExpanded,
usePagination, usePagination,
useRowSelect useRowSelect
// (hooks) => {
// hooks.visibleColumns.push((columns) => {
// return [
// {
// id: "selection",
// className: "w-7",
// Header: ({ getToggleAllRowsSelectedProps }) => (
// <Checkbox {...getToggleAllRowsSelectedProps()} />
// ),
// Cell: ({ row }) => (
// <Checkbox {...row.getToggleRowSelectedProps()} />
// ),
// },
// ...columns,
// ];
// });
// }
); );
const { globalFilter, pageIndex, pageSize } = state; const { globalFilter, pageIndex, pageSize } = state;
@ -212,6 +164,7 @@ const BasicTable = ({
return ( return (
<div className="bg-white p-4 rounded"> <div className="bg-white p-4 rounded">
{/* {filtering && <section>TANNAZ</section>} */}
{/* <div className="flex flex-row items-center"> {/* <div className="flex flex-row items-center">
{listView.map((list, i) => ( {listView.map((list, i) => (
<img <img
@ -329,7 +282,7 @@ const BasicTable = ({
{/* table LIST */} {/* table LIST */}
{activeTab == 0 ? ( {activeTab == 0 ? (
<> <>
{activeList === true && ( {activeList === false && (
// table // table
<table <table
{...getTableProps()} {...getTableProps()}
@ -362,23 +315,6 @@ const BasicTable = ({
))} ))}
</thead> </thead>
)} )}
{/* filter row */}
{filtering && (
<thead style={{ backgroundColor: "#F1F5FE" }}>
{headerGroups.map((headerGroup, index) => (
<tr key={index} {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
<th
{...column.getHeaderProps()}
className="py-2 px-4 text-sm"
>
{column.canFilter ? column.render("Filter") : null}
</th>
))}
</tr>
))}
</thead>
)}
<tbody <tbody
{...getTableBodyProps()} {...getTableBodyProps()}
className="divide-y divide-gray-200" className="divide-y divide-gray-200"
@ -445,7 +381,7 @@ const BasicTable = ({
</table> </table>
)} )}
{/* GRID LIST */} {/* GRID LIST */}
{activeList === false && ( {activeList === true && (
<div <div
{...getTableBodyProps()} {...getTableBodyProps()}
className="flex flex-row flex-wrap gap-4 items-center justify-center" className="flex flex-row flex-wrap gap-4 items-center justify-center"

@ -1,16 +1,14 @@
import { format } from "date-fns"; import { format } from "date-fns";
import BasicTable, { import BasicTable, { SelectColumnFilter } from "../ReactTable5/BasicTable";
CheckBox, import { Checkbox } from "./Checkbox";
SelectColumnFilter,
} from "../ReactTable5/BasicTable";
import { FileType } from "./FileType"; import { FileType } from "./FileType";
export const COLUMNS = ({ setFiltering, filtering, addTab }) => [ export const COLUMNS = ({ setFiltering, filtering, addTab }) => [
{ {
Header: "چک باکس", Header: "چک باکس",
accessor: CheckBox, accessor: () => Checkbox({ setFiltering, filtering, addTab }),
className: "w-7", className: "w-7",
}, },
{ {

@ -1,21 +1,20 @@
import React from "react"; import React, { useState } from "react";
export const Checkbox = React.forwardRef(({ indeterminate, ...rest }, ref) => { export function Checkbox({ setFiltering, filtering, addTab }) {
const defaultRef = React.useRef(); // const [selectedFilterRow, setSelectedFilterRow] = useState(filtering);
const resolvedRef = ref || defaultRef;
React.useEffect(() => {
resolvedRef.current.indeterminate = indeterminate;
}, [resolvedRef, indeterminate]);
return ( return (
<> <input
<input // onClick={() => {
type="checkbox" // console.log("mahdi");
className="rounded-sm " // setFiltering(!selectedFilterRow);
ref={resolvedRef} // setSelectedFilterRow(!selectedFilterRow);
{...rest} // }}
/> type="checkbox"
</> // className={`cursor-pointer ${selectedFilterRow ? "p-72" : "p-5"}`}
className={`cursor-pointer`}
/>
); );
}); }
Checkbox.defaultProps = {};

Loading…
Cancel
Save