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

update

Browse Source
master
mahdi 3 years ago
parent e70ea0b768
commit c1b186927c
5 changed files with 7 additions and 318 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/components/ReactTable3/BasicTable.js
  2. 99
      src/components/ReactTable3/FilteringTable.js
  3. 107
      src/components/ReactTable3/PaginationTable.js
  4. 88
      src/components/ReactTable3/SortingTable.js
  5. 29
      src/components/ReactTable3/index.js

2
src/components/ReactTable3/BasicTable.js
Unescape View File

@ -86,7 +86,7 @@ const BasicTable = () => {
}; };
const { globalFilter, pageIndex, pageSize } = state; const { globalFilter, pageIndex, pageSize } = state;
const firstPageRows = rows.slice(0, 10); // const firstPageRows = rows.slice(0, 10);
return ( return (
<> <>

99
src/components/ReactTable3/FilteringTable.js
Unescape View File

@ -1,99 +0,0 @@
// not using
import React, {useMemo} from 'react';
import {useTable, useSortBy, useGlobalFilter} from 'react-table';
import {COLUMNS} from './columns';
import MOCK_DATA from './MOCK_DATA.json';
const FilteringTable = () => {
const columns = React.useMemo(() => COLUMNS, [])
const data = useMemo(() => MOCK_DATA,[])
const {
getTableProps,
getTableBodyProps,
headerGroups,
footerGroups,
rows,
prepareRow,
state,
setGlobalFilter,
} = useTable({
columns,
data,
},
useSortBy,
useGlobalFilter
)
const { globalFilter } = state
return (
<>
<GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} />
<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="px-4 py-2 text-right text-xs" style={{color: '#3287B9'}}>
{column.render('Header')}
<span>
{column.isSorted ? (column.isSortedDesc ? ' 🔽' : ' 🔼') : ''}
</span>
</th>
))}
</tr>
))}
</thead>
<tbody {...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>
)
})}
</tbody>
<tfoot className="bg-gray-300">
{
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>
</>
)
};
export default FilteringTable;

107
src/components/ReactTable3/PaginationTable.js
Unescape View File

@ -1,107 +0,0 @@
// not using
import React, {useMemo} from 'react';
import {useTable, useSortBy, useGlobalFilter, useFilters} from 'react-table';
import {COLUMNS} from './columns';
import {GlobalFilter} from './GlobalFilter';
import MOCK_DATA from './MOCK_DATA.json';
const PaginationTable = () => {
const columns = React.useMemo(() => COLUMNS, [])
const data = useMemo(() => MOCK_DATA,[])
const {
getTableProps,
getTableBodyProps,
headerGroups,
footerGroups,
rows,
prepareRow,
state,
setGlobalFilter,
} = useTable({
columns,
data,
},
useFilters,
useGlobalFilter,
useSortBy,
)
const { globalFilter } = state
return (
<>
<GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} />
<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>
{/* <div>
{column.canFilter ? column.render('Filter') : null }
</div> */}
</th>
))}
</tr>
))}
</thead>
<tbody {...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>
)
})}
</tbody>
<tfoot className={`bg-gray-300 ${headerGroup.headers.length > 2 ? 'hidden' : 'block'}`} >
{
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>
</>
)
};
export default PaginationTable;

88
src/components/ReactTable3/SortingTable.js
Unescape View File

@ -1,88 +0,0 @@
// not using
import React, {useMemo} from 'react';
import {useTable, useSortBy} from 'react-table';
import {COLUMNS} from './columns';
import MOCK_DATA from './MOCK_DATA.json';
const SortingTable = () => {
const columns = React.useMemo(() => COLUMNS, [])
const data = useMemo(() => MOCK_DATA,[])
const {
getTableProps,
getTableBodyProps,
headerGroups,
footerGroups,
rows,
prepareRow,
} = useTable({
columns,
data,
},
useSortBy
)
return (
<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="px-4 py-2 text-right text-xs" style={{color: '#3287B9'}}>
{column.render('Header')}
<span>
{column.isSorted ? (column.isSortedDesc ? ' 🔽' : ' 🔼') : ''}
</span>
</th>
))}
</tr>
))}
</thead>
<tbody {...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>
)
})}
</tbody>
<tfoot className="bg-gray-300">
{
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>
)
};
export default SortingTable;

29
src/components/ReactTable3/index.js
Unescape View File

@ -1,30 +1,13 @@
import React from 'react'; import React from "react";
import BasicTable from './BasicTable'; import BasicTable from "./BasicTable";
const ReactTable3 = () => { const ReactTable3 = () => {
return ( return (
<div className="min-h-screen "> <div>
<main className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 pt-4"> <BasicTable />
<div className="my-4 flex flex-col"> mahdi
<div className="-my-2 overflow-x-auto -mx-4 sm:-mx-6 lg:-mx-8">
<div className="py-2 align-middle inline-block min-w-full">
<div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
<BasicTable />
</div>
</div>
</div>
</div>
</main>
</div> </div>
);
)
}; };
export default ReactTable3; export default ReactTable3;

Write Preview
Loading…
Cancel
Save