master
mahdi andalib 3 years ago
parent ed547d8c87
commit b68c35675f
  1. 4
      src/App.js
  2. 12
      src/components/ReactTable3/BasicTable.js
  3. 6
      src/components/ReactTable3/index.scss

@ -43,7 +43,6 @@ import Design2 from "./components/ProductSalesAmount/Design2";
import TableDesign1 from "./components/Table/Design1"; import TableDesign1 from "./components/Table/Design1";
import ReactTable2 from "./components/ReactTable2"; import ReactTable2 from "./components/ReactTable2";
import ReactTable3 from "./components/ReactTable3"; import ReactTable3 from "./components/ReactTable3";
// import Pagintaion from "./components/ReactTable3/Pagintaion.js";
import Switch from "./components/Switch"; import Switch from "./components/Switch";
@ -71,7 +70,7 @@ function App() {
{/* <Testttt /> */} {/* <Testttt /> */}
{/* <Design2D /> */} {/* <Design2D /> */}
{/* <Features /> */} {/* <Features /> */}
<Feedback /> {/* <Feedback /> */}
{/* <Alert /> */} {/* <Alert /> */}
{/* <Toast /> */} {/* <Toast /> */}
{/* <ProductSuggestion /> */} {/* <ProductSuggestion /> */}
@ -91,7 +90,6 @@ function App() {
{/* <TableDesign1 /> */} {/* <TableDesign1 /> */}
{/* <ReactTable2 /> */} {/* <ReactTable2 /> */}
<ReactTable3 /> <ReactTable3 />
{/* <Pagintaion /> */}
</div> </div>
</Provider> </Provider>
); );

@ -1,5 +1,7 @@
import React, { useMemo } from "react"; import React, { useMemo } from "react";
import "./index.scss";
import { import {
useTable, useTable,
useSortBy, useSortBy,
@ -36,7 +38,7 @@ export function SelectColumnFilter({
<label className="flex gap-x-2 items-baseline"> <label className="flex gap-x-2 items-baseline">
<span className="text-gray-700">{render("Header")}: </span> <span className="text-gray-700">{render("Header")}: </span>
<select <select
className="rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" className="rounded-md border-gray-300 shadow-sm text-xs focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
name={id} name={id}
id={id} id={id}
value={filterValue} value={filterValue}
@ -44,7 +46,7 @@ export function SelectColumnFilter({
setFilter(e.target.value || undefined) setFilter(e.target.value || undefined)
}} }}
> >
<option value="">همه</option> <option className="text-xs" value="">همه</option>
{options.map((option, i) => ( {options.map((option, i) => (
<option key={i} value={option} className="text-xs"> <option key={i} value={option} className="text-xs">
{(() => { {(() => {
@ -156,15 +158,17 @@ const BasicTable = () => {
console.log(rows.length); console.log(rows.length);
return ( return (
<> <>
{headerGroups.map((headerGroup) => <div className="customeClass1">
{headerGroups.map((headerGroup) =>
headerGroup.headers.map((column) => headerGroup.headers.map((column) =>
column.Filter ? ( column.Filter ? (
<div className="mt-2 sm:mt-0" key={column.id}> <div className="mt-2 sm:mt-0 customeClass2" key={column.id}>
{column.render("Filter")} {column.render("Filter")}
</div> </div>
) : null ) : null
) )
)} )}
</div>
<div className="flex flex-row items-center justify-between mb-3 mx-4"> <div className="flex flex-row items-center justify-between mb-3 mx-4">
{/* search box */} {/* search box */}
<GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} /> <GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} />

@ -0,0 +1,6 @@
.customeClass1 .customeClass2 input {
display: none !important;
}
.customeClass1 .customeClass2 span {
display: none !important;
}
Loading…
Cancel
Save