mahdi
/
danovinTasks
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update

Browse Source
master
mahdi andalib 3 years ago
parent 3885ef5f9a
commit 029a21f316
2 changed files with 128 additions and 125 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/App.js
  2. 251
      src/components/ReactTable5/BasicTable.js

2
src/App.js
Unescape View File

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

251
src/components/ReactTable5/BasicTable.js
Unescape View File

@ -242,118 +242,139 @@ const BasicTable = ({
{/* table LIST */} {/* table LIST */}
{activeTab == 0 ? ( {activeTab == 0 ? (
<> <>
<table {activeList === false && (
{...getTableProps()} <table
className="min-w-full divide-y divide-gray-200 mb-5" {...getTableProps()}
> className="min-w-full divide-y divide-gray-200 mb-5"
{thead && (
<thead className="" style={{ backgroundColor: "#F3F8FF" }}>
{headerGroups.map((headerGroup, index) => (
<tr key={index} {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
<th
{...column.getHeaderProps(
column.getSortByToggleProps()
)}
scope="col"
className="cursor-pointer py-2 px-4 text-right text-xs font-medium"
style={{ color: "#3287B9" }}
>
{column.render("Header")}
<span>
{column.isSorted
? column.isSortedDesc
? " 🔽"
: " 🔼"
: ""}
</span>
</th>
))}
</tr>
))}
</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
{...getTableBodyProps()}
className="divide-y divide-gray-200"
> >
{page.map((row, idx) => { {thead && (
prepareRow(row); <thead className="" style={{ backgroundColor: "#F3F8FF" }}>
return ( {headerGroups.map((headerGroup, index) => (
<React.Fragment key={idx}> <tr key={index} {...headerGroup.getHeaderGroupProps()}>
<tr {headerGroup.headers.map((column) => (
{...row.getRowProps()} <th
style={{ {...column.getHeaderProps(
backgroundColor: isEven(idx) ? "#F9F9F9" : "#fff", column.getSortByToggleProps()
}} )}
// className={isEven(idx) ? "bg-gray-600" : "bg-white"} scope="col"
// className="cursor-pointer py-2 px-4 text-right text-xs font-medium"
> style={{ color: "#3287B9" }}
{row.cells.map((cell, index) => { >
// console.log(row.cells); {column.render("Header")}
return ( <span>
<td {column.isSorted
{...cell.getCellProps({ ? column.isSortedDesc
className: cell.column.className, ? " 🔽"
})} : " 🔼"
// className="p-4 whitespace-nowrap text-xs text-right" : ""}
style={{ </span>
padding: "12px", </th>
fontSize: "13px", ))}
textAlign: "right", </tr>
whiteSpace: "nowrap", ))}
// backgroundColor: row.cells[0] ? "red" : "blue", </thead>
}} )}
key={index} {/* filter row */}
{...cell.getCellProps()} {filtering && (
// className="p-4 whitespace-nowrap text-xs text-right " <thead style={{ backgroundColor: "#F1F5FE" }}>
role="cell" {headerGroups.map((headerGroup, index) => (
> <tr key={index} {...headerGroup.getHeaderGroupProps()}>
{cell.render("Cell")} {headerGroup.headers.map((column) => (
</td> <th
); {...column.getHeaderProps()}
})} className="py-2 px-4 text-sm"
>
{column.canFilter ? column.render("Filter") : null}
</th>
))}
</tr> </tr>
{row.isExpanded ? ( ))}
<tr> </thead>
<td colSpan={headerGroups[0].headers.length}> )}
{/* {RenderRowSubComponent({ <tbody
{...getTableBodyProps()}
className="divide-y divide-gray-200"
>
{page.map((row, idx) => {
prepareRow(row);
return (
<React.Fragment key={idx}>
<tr
{...row.getRowProps()}
style={{
backgroundColor: isEven(idx) ? "#F9F9F9" : "#fff",
}}
// className={isEven(idx) ? "bg-gray-600" : "bg-white"}
//
>
{row.cells.map((cell, index) => {
// console.log(row.cells);
return (
<td
{...cell.getCellProps({
className: cell.column.className,
})}
// className="p-4 whitespace-nowrap text-xs text-right"
style={{
padding: "12px",
fontSize: "13px",
textAlign: "right",
whiteSpace: "nowrap",
// backgroundColor: row.cells[0] ? "red" : "blue",
}}
key={index}
{...cell.getCellProps()}
// className="p-4 whitespace-nowrap text-xs text-right "
role="cell"
>
{cell.render("Cell")}
</td>
);
})}
</tr>
{row.isExpanded ? (
<tr>
<td colSpan={headerGroups[0].headers.length}>
{/* {RenderRowSubComponent({
row: row.original, row: row.original,
columns, columns,
addTab, addTab,
})} */} })} */}
{/* {RenderRowSubComponent({ row: row.values })} */} {/* {RenderRowSubComponent({ row: row.values })} */}
<RenderRowSubComponent <RenderRowSubComponent
columns={columns} columns={columns}
addTab={addTab} addTab={addTab}
row={row.original} row={row.original}
/> />
{/* {console.log(row.original)} */} {/* {console.log(row.original)} */}
</td> </td>
</tr> </tr>
) : null} ) : null}
</React.Fragment> </React.Fragment>
); );
})} })}
</tbody> </tbody>
</table> </table>
)}
{/* GRID LIST */}
{activeList === true && (
<div className="flex flex-row gap-4">
{data.map((item, index) => (
<div
className="flex flex-col px-4 py-5 rounded-md"
key={index}
style={{ backgroundColor: "#fff" }}
>
<img src={image1} className="w-52" />
<p className="text-sm my-3">{item.fileName}</p>
<span className="text-xs text-left text-gray-500">
{item.fileSize}
</span>
</div>
))}
</div>
)}
{/* bottom table */} {/* bottom table */}
<GoToPage <GoToPage
pageIndex={pageIndex} pageIndex={pageIndex}
@ -371,24 +392,6 @@ const BasicTable = ({
columns={defaultColumn} columns={defaultColumn}
/> />
)} )}
{/* GRID LIST */}
{activeList === true && (
<div className="flex flex-row gap-4">
{data.map((item, index) => (
<div
className="flex flex-col px-4 py-5 rounded-md"
key={index}
style={{ backgroundColor: "#fff" }}
>
<img src={image1} className="w-52" />
<p className="text-sm my-3">{item.fileName}</p>
<span className="text-xs text-left text-gray-500">
{item.fileSize}
</span>
</div>
))}
</div>
)}
</> </>
); );
}; };

Write Preview
Loading…
Cancel
Save