master
mahdi 3 years ago
parent e70ea0b768
commit c1b186927c
  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

@ -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 (
<> <>

@ -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;

@ -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;

@ -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;

@ -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;

Loading…
Cancel
Save