{"id":10104,"date":"2024-04-16T04:46:56","date_gmt":"2024-04-16T04:46:56","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/qanda\/?p=10104"},"modified":"2024-04-16T04:47:27","modified_gmt":"2024-04-16T04:47:27","slug":"react-table-sort","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/qanda\/react\/react-table-sort","title":{"rendered":"Sort React Table By Clicking On The Column Header"},"content":{"rendered":"<p>To enable sorting functionality upon clicking the column headers in your React table, you can follow these steps:<\/p>\n<ul>\n<li>Define a state to keep track of the current sorting configuration.<\/li>\n<li>Implement a function to handle sorting based on the clicked column header.<\/li>\n<li>Modify the table header cells to trigger the sorting function when clicked.<\/li>\n<li>Update the useEffect hook to implement sorting based on the sorting configuration.<\/li>\n<\/ul>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"r\">import React, { useState, useEffect } from 'react';\r\nimport { getUsers } from '..\/..\/services\/userService';\r\nimport { useNavigate } from 'react-router-dom';\r\nimport Pagination from '@mui\/material\/Pagination';\r\n\r\nconst Table = () =&gt; {\r\n    const navigate = useNavigate();\r\n\r\n    const [users, setUsers] = useState([]);\r\n    const [currentUsers, setCurrentUsers] = useState([]);\r\n    const [search, setSearch] = useState('');\r\n    const [sorting, setSorting] = useState({ key: \"name\", ascending: true });\r\n\r\n    const pageItemCount = 15;\r\n    const [pageCount, setPageCount] = useState(0);\r\n    const [currentPage, setCurrentPage] = useState(1);\r\n\r\n    useEffect(async () =&gt; {\r\n        try {\r\n            const response = await getUsers(search);\r\n            setUsers(response.data.users);\r\n            setPageCount(Math.ceil(response.data.users.length \/ pageItemCount));\r\n            setCurrentUsers(response.data.users.slice(0, pageItemCount));\r\n        } catch (error) {\r\n            console.error('Error fetching users:', error);\r\n        }\r\n    }, [search]);\r\n\r\n    useEffect(() =&gt; {\r\n        const sortedUsers = [...currentUsers].sort((a, b) =&gt; {\r\n            if (a[sorting.key] &lt; b[sorting.key]) {\r\n                return sorting.ascending ? -1 : 1;\r\n            }\r\n            if (a[sorting.key] &gt; b[sorting.key]) {\r\n                return sorting.ascending ? 1 : -1;\r\n            }\r\n            return 0;\r\n        });\r\n        setCurrentUsers(sortedUsers);\r\n    }, [currentUsers, sorting]);\r\n\r\n    function applySorting(key) {\r\n        if (sorting.key === key) {\r\n            setSorting({ ...sorting, ascending: !sorting.ascending });\r\n        } else {\r\n            setSorting({ key: key, ascending: true });\r\n        }\r\n    }\r\n\r\n    const changePage = (i) =&gt; {\r\n        setCurrentPage(i);\r\n        const startItem = (i - 1) * pageItemCount;\r\n        setCurrentUsers(users.slice(startItem, startItem + pageItemCount));\r\n    };\r\n\r\n    const handleChange = (event, value) =&gt; {\r\n        changePage(value);\r\n    };\r\n\r\n    return (\r\n        &lt;div dir='rtl' className='bg-background mt-10 px-5 rd1200:px-30 overflow-auto'&gt;\r\n            &lt;div className='flex flex-wrap justify-between items-center'&gt;\r\n                &lt;div&gt;\r\n                    &lt;input\r\n                        type='text'\r\n                        className='my-3 py-2 pl-3 pr-10 text-sm text-text-secondary shadow-sm focus:ring-2 ring-text-secondary rounded-md w-full rd500:w-120'\r\n                        placeholder='search ..'\r\n                        onChange={(e) =&gt; setSearch(e.target.value)}\r\n                        value={search}\r\n                    \/&gt;\r\n                &lt;\/div&gt;\r\n\r\n                &lt;div className='flex justify-center'&gt;\r\n                    &lt;select\r\n                        className='form-select form-select-sm my-3 py-2 pl-15 pr-2 text-sm text-text-secondary shadow-sm rounded-md w-full focus:ring-2 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none '\r\n                        aria-label='.form-select-sm example'\r\n                        onChange={(e) =&gt; navigate(e.target.value)}\r\n                    &gt;\r\n                        &lt;option value='\/'&gt;users&lt;\/option&gt;\r\n                        &lt;option value='\/ext'&gt;other users&lt;\/option&gt;\r\n                    &lt;\/select&gt;\r\n                &lt;\/div&gt;\r\n            &lt;\/div&gt;\r\n\r\n            &lt;table className='w-full border-separate rounded-md'&gt;\r\n                &lt;thead&gt;\r\n                    &lt;tr className='bg-text-secondary text-white shadow-sm text-center'&gt;\r\n                        &lt;th className='p-2' onClick={() =&gt; applySorting('name')}&gt;\r\n                            name {sorting.key === 'name' &amp;&amp; (sorting.ascending ? '\u25b2' : '\u25bc')}\r\n                        &lt;\/th&gt;\r\n                        &lt;th className='p-2' onClick={() =&gt; applySorting('phone')}&gt;\r\n                            phone {sorting.key === 'phone' &amp;&amp; (sorting.ascending ? '\u25b2' : '\u25bc')}\r\n                        &lt;\/th&gt;\r\n                    &lt;\/tr&gt;\r\n                &lt;\/thead&gt;\r\n                &lt;tbody&gt;\r\n                    {currentUsers.map((item) =&gt; (\r\n                        &lt;tr\r\n                            key={item.id}\r\n                            className={index % 2 === 0 ? 'bg-white shadow-sm text-center' : 'bg-text bg-opacity-5 shadow-sm text-center'}\r\n                        &gt;\r\n                            &lt;td className='text-text text-sm p-2'&gt;{item.name}&lt;\/td&gt;\r\n                            &lt;td className='text-text text-sm p-2'&gt;{item.phone}&lt;\/td&gt;\r\n                        &lt;\/tr&gt;\r\n                    ))}\r\n                &lt;\/tbody&gt;\r\n            &lt;\/table&gt;\r\n            &lt;Pagination\r\n                className='mt-2 pb-20'\r\n                dir='ltr'\r\n                page={currentPage}\r\n                count={pageCount}\r\n                onChange={handleChange}\r\n                variant='outlined'\r\n                shape='rounded'\r\n            \/&gt;\r\n        &lt;\/div&gt;\r\n    );\r\n};\r\nexport default Table;<\/pre>\n<p>This code introduces sorting indicators (\u25b2 and \u25bc) alongside the column headers to show the current sorting direction. Additionally, it enhances the sorting function to switch the sorting direction upon multiple clicks on the same column header.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>To enable sorting functionality upon clicking the column headers in your React table, you can follow these steps: Define a state to keep track of the current sorting configuration. Implement a function to handle sorting based on the clicked column header. Modify the table header cells to trigger the sorting function when clicked. Update the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":10088,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-10104","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/10104"}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/comments?post=10104"}],"version-history":[{"count":3,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/10104\/revisions"}],"predecessor-version":[{"id":10107,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/10104\/revisions\/10107"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media\/10088"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media?parent=10104"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/categories?post=10104"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/tags?post=10104"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}