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
Split 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 /> */}
{/* <ReactTable2 /> */}
{/* <ReactTable3 /> */}
{/* <ReactTable4 /> */}
<ReactTable4 />
<ReactTable5 />
{/* <Digikala /> */}
{/* <HeaderDesign1 />

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

@ -242,118 +242,139 @@ const BasicTable = ({
{/* table LIST */}
{activeTab == 0 ? (
<>
<table
{...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"
{activeList === false && (
<table
{...getTableProps()}
className="min-w-full divide-y divide-gray-200 mb-5"
>
{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>
);
})}
{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>
{row.isExpanded ? (
<tr>
<td colSpan={headerGroups[0].headers.length}>
{/* {RenderRowSubComponent({
))}
</thead>
)}
<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,
columns,
addTab,
})} */}
{/* {RenderRowSubComponent({ row: row.values })} */}
<RenderRowSubComponent
columns={columns}
addTab={addTab}
row={row.original}
/>
{/* {console.log(row.original)} */}
</td>
</tr>
) : null}
</React.Fragment>
);
})}
</tbody>
</table>
{/* {RenderRowSubComponent({ row: row.values })} */}
<RenderRowSubComponent
columns={columns}
addTab={addTab}
row={row.original}
/>
{/* {console.log(row.original)} */}
</td>
</tr>
) : null}
</React.Fragment>
);
})}
</tbody>
</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 */}
<GoToPage
pageIndex={pageIndex}
@ -371,24 +392,6 @@ const BasicTable = ({
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