Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 15288 | Rev 15290 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 15288 Rev 15289
Línea 19... Línea 19...
19 
	console.log(tableData)
 19 
	console.log(tableData)
Línea 20... Línea 20...
20 
 
 20 
 
21 
	return sortedData
 21 
	return sortedData
Línea 22... Línea 22...
22 
}
 22 
}
23 
 
 23 
 
24 
const SortButton = ({ sortOrder, columnKey, sortKey, onClick }) => {
 24 
const SortButton = ({ reverse, columnKey, sortKey, onClick }) => {
25 
	return (
 - 
 
26 
		<button onClick={onClick} className="btn p-0">
 25 
	return (
27 
			{
 26 
		<button onClick={onClick} className="btn p-0 ml-2">
28 
				(sortKey === columnKey) && (sortOrder === 'desc')
 27 
			{(sortKey === columnKey) && reverse
29 
					? <i className='fa fa-angle-up' />
 28 
				? <i className='fa fa-angle-up' />
30 
					: <i className='fa fa-angle-down' />
 29 
				: <i className='fa fa-angle-down' />
31 
			}
 30 
			}
32 
		</button>
 31 
		</button>
Línea 33... Línea 32...
33 
	)
 32 
	)
Línea 34... Línea 33...
34 
}
 33 
}
35 
 
 34 
 
Línea 36... Línea -...
36 
export const Table = ({ data = [], headers, setData, children }) => {
 - 
 
37 
 
 35 
export const Table = ({ data = [], headers, setData, children }) => {
38 
	const [sortKey, setSortKey] = useState('name')
 - 
 
39 
	const [sortOrder, setSortOrder] = useState('ascn')
 - 
 
Línea 40... Línea 36...
40 
 
 36 
 
41 
	const sortedData = useCallback(
 37 
	const [sortKey, setSortKey] = useState('name')
42 
		() => sortData({ tableData: data, sortKey, reverse: sortOrder === 'desc' }),
 - 
 
43 
		[data, sortKey, sortOrder]
 38 
	const [reverse, setReverse] = useState(false)
44 
	)
 39 
 
Línea 45... Línea 40...
45 
 
 40 
	const sortedData = useCallback(() => sortData({ tableData: data, sortKey: sortKey, reverse: reverse }), [data, sortKey, reverse])
46 
	const changeSort = (key) => {
 41 
 
47 
		setSortOrder(sortOrder === 'ascn' ? 'desc' : 'ascn')
 42 
	const changeSort = (key) => {
Línea 48... Línea 43...
48 
 
 43 
		setReverse(!reverse)
49 
		setSortKey(key)
 44 
		setSortKey(key)
50 
	}
 45 
	}
51 
 
 46 
 
52 
	useEffect(() => {
 - 
 
53 
		setData(sortedData())
 47 
	useEffect(() => {
54 
	}, [sortKey, sortOrder])
 48 
		setData(sortedData())
55 
 
 49 
	}, [sortKey, reverse])
56 
	return (
 50 
 
57 
		<table className="table table-hover my-table w-100">
 51 
	return (
58 
			<thead>
 52 
		<table className="table table-hover my-table w-100">
59 
				<tr>
 53 
			<thead>
- 
 
 54 
				<tr>
- 
 
 55 
					{headers.map((row) =>
60 
					{
 56 
						<th key={row.key} className="text-vertical-middle">
61 
						headers.map((row) => (
 57 
							{row.label}
62 
							<th key={row.key} className="text-vertical-middle">
 58 
							{row.isSorteable &&
63 
								{row.label}
 59 
								<SortButton
64 
								{
 60 
									columnKey={row.key}
65 
									row.isSorteable
 61 
									onClick={() => changeSort(row.key)}
66 
									&&
 62 
									sortKey={sortKey}
67 
									<SortButton columnKey={row.key} onClick={() => changeSort(row.key)} {...{ sortOrder, sortKey, }} />
 63 
									reverse={reverse}
68 
								}
 64 
								/>