: resolveFrom(path.resolve('node_modules'), 'react-dom'),\n },\n }\n return config\n}\n\nconst includeSrcDirectory = config =\u003E {\n config.resolve = {\n ...config.resolve,\n modules: [path.resolve('src'), ...config.resolve.modules],\n }\n return config\n}\n\nmodule.exports = [\n ['use-babel-config', '.babelrc'],\n ['use-eslint-config', '.eslintrc'],\n fixLinkedDependencies,\n \u002F\u002F includeSrcDirectory,\n]\n","id":"mod_B9bUhq7zaKebdNjxJ2dnf1","is_binary":false,"title":".rescriptsrc.js","sha":null,"inserted_at":"2019-10-21T14:35:32","updated_at":"2019-10-14T22:28:41","upload_id":null,"shortid":"SyBZo8uMYH","source_id":"src_9bsg6dMmmS6fxBFMbj6a9C","directory_shortid":null},{"code":"# See https:\u002F\u002Fhelp.github.com\u002Farticles\u002Fignoring-files\u002F for more about ignoring files.\n\n# dependencies\n\u002Fnode_modules\n\u002F.pnp\n.pnp.js\n\n# testing\n\u002Fcoverage\n\n# production\n\u002Fbuild\n\n# misc\n.DS_Store\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n","id":"mod_3u8JVrYNuCiuwiywTUpCHT","is_binary":false,"title":".gitignore","sha":null,"inserted_at":"2019-10-21T14:35:32","updated_at":"2019-10-14T22:28:41","upload_id":null,"shortid":"H1N-oL_zYS","source_id":"src_9bsg6dMmmS6fxBFMbj6a9C","directory_shortid":null},{"code":"{\n \"extends\": [\"react-app\", \"prettier\"],\n \"rules\": {\n \u002F\u002F \"eqeqeq\": 0,\n \u002F\u002F \"jsx-a11y\u002Fanchor-is-valid\": 0\n }\n}\n","id":"mod_XLggEFoUa4otEGyho7Wiz6","is_binary":false,"title":".eslintrc","sha":null,"inserted_at":"2019-10-21T14:35:32","updated_at":"2019-10-14T22:28:41","upload_id":null,"shortid":"BkQZj8uztS","source_id":"src_9bsg6dMmmS6fxBFMbj6a9C","directory_shortid":null},{"code":"SKIP_PREFLIGHT_CHECK=true","id":"mod_48g6uozWQbXz7C7SSeBCDx","is_binary":false,"title":".env","sha":null,"inserted_at":"2019-10-21T14:35:32","updated_at":"2019-10-14T22:28:41","upload_id":null,"shortid":"BkfWsIuztH","source_id":"src_9bsg6dMmmS6fxBFMbj6a9C","directory_shortid":null},{"code":"{\n \"presets\": [\"react-app\"],\n \"plugins\": [\"styled-components\"]\n}\n","id":"mod_mpyoPP3ENC9dPoeqzyPfK","is_binary":false,"title":".babelrc","sha":null,"inserted_at":"2019-10-21T14:35:32","updated_at":"2019-10-14T22:28:41","upload_id":null,"shortid":"Sybbo8_zFH","source_id":"src_9bsg6dMmmS6fxBFMbj6a9C","directory_shortid":null},{"code":"import React from \"react\";\nimport styled from \"styled-components\";\nimport { useTable, useSortBy } from \"react-table\";\n\nimport makeData from \".\u002FmakeData\";\n\nconst Styles = styled.div`\n padding: 1rem;\n\n table {\n border-spacing: 0;\n border: 1px solid black;\n\n tr {\n :last-child {\n td {\n border-bottom: 0;\n }\n }\n }\n\n th,\n td {\n margin: 0;\n padding: 0.5rem;\n border-bottom: 1px solid black;\n border-right: 1px solid black;\n\n :last-child {\n border-right: 0;\n }\n }\n }\n`;\n\nfunction Table({ columns, data }) {\n const customOrderByFn = React.useMemo(a =\u003E console.log(\"Hit Custom Func\", a));\n\n const {\n getTableProps,\n getTableBodyProps,\n headerGroups,\n rows,\n prepareRow\n } = useTable(\n {\n columns,\n data,\n manualSorting: true,\n orderByFn: customOrderByFn\n },\n useSortBy\n );\n\n \u002F\u002F We don't want to render all 2000 rows for this example, so cap\n \u002F\u002F it at 20 for this use case\n const firstPageRows = rows.slice(0, 20);\n\n return (\n \u003C\u003E\n \u003Ctable {...getTableProps()}\u003E\n \u003Cthead\u003E\n {headerGroups.map(headerGroup =\u003E (\n \u003Ctr {...headerGroup.getHeaderGroupProps()}\u003E\n {headerGroup.headers.map(column =\u003E (\n \u002F\u002F Add the sorting props to control sorting. For this example\n \u002F\u002F we can add them into the header props\n \u003Cth {...column.getHeaderProps(column.getSortByToggleProps())}\u003E\n {column.render(\"Header\")}\n {\u002F* Add a sort direction indicator *\u002F}\n \u003Cspan\u003E\n {column.isSorted\n ? column.isSortedDesc\n ? \" 🔽\"\n : \" 🔼\"\n : \"\"}\n \u003C\u002Fspan\u003E\n \u003C\u002Fth\u003E\n ))}\n \u003C\u002Ftr\u003E\n ))}\n \u003C\u002Fthead\u003E\n \u003Ctbody {...getTableBodyProps()}\u003E\n {firstPageRows.map(\n (row, i) =\u003E\n prepareRow(row) || (\n \u003Ctr {...row.getRowProps()}\u003E\n {row.cells.map(cell =\u003E {\n return (\n \u003Ctd {...cell.getCellProps()}\u003E{cell.render(\"Cell\")}\u003C\u002Ftd\u003E\n );\n })}\n \u003C\u002Ftr\u003E\n )\n )}\n \u003C\u002Ftbody\u003E\n \u003C\u002Ftable\u003E\n \u003Cbr \u002F\u003E\n \u003Cdiv\u003EShowing the first 20 results of {rows.length} rows\u003C\u002Fdiv\u003E\n \u003C\u002F\u003E\n );\n}\n\nfunction App() {\n const columns = React.useMemo(\n () =\u003E [\n {\n Header: \"Name\",\n columns: [\n {\n Header: \"First Name\",\n accessor: \"firstName\"\n },\n {\n Header: \"Last Name\",\n accessor: \"lastName\"\n }\n ]\n },\n {\n Header: \"Info\",\n columns: [\n {\n Header: \"Age\",\n accessor: \"age\"\n },\n {\n Header: \"Visits\",\n accessor: \"visits\"\n },\n {\n Header: \"Status\",\n accessor: \"status\"\n },\n {\n Header: \"Profile Progress\",\n accessor: \"progress\"\n }\n ]\n }\n ],\n []\n );\n\n const data = React.useMemo(() =\u003E makeData(2000), []);\n\n return (\n \u003CStyles\u003E\n \u003CTable columns={columns} data={data} \u002F\u003E\n \u003C\u002FStyles\u003E\n );\n}\n\nexport default App;\n","id":"mod_YDtrT7W4DFvQ9sTGtAX4Gs","is_binary":false,"title":"App.js","sha":null,"inserted_at":"2019-10-21T14:35:32","updated_at":"2019-10-21T15:24:36","upload_id":null,"shortid":"HyibjU_ztr","source_id":"src_9bsg6dMmmS6fxBFMbj6a9C","directory_shortid":"rJlWiIOfKS"}],"git":null,"ai_consent":false,"settings":{"ai_consent":null,"use_pint":false},"forked_template_sandbox":null,"inserted_at":"2019-10-21T14:35:32","collection":false,"permissions":{"prevent_sandbox_export":false,"prevent_sandbox_leaving":false},"screenshot_url":"https:\u002F\u002Fscreenshots.codesandbox.io\u002Ff1bmd\u002F13.png","free_plan_editing_restricted":false,"feature_flags":{"comments":false,"container_lsp":false},"original_git_commit_sha":"4b7c85624b985ea64db6bae54cd8a903c2c10378","team":null,"source_id":"src_9bsg6dMmmS6fxBFMbj6a9C","description":null,"always_on":false,"alias":"tannerlinsleyreact-table-sorting-f1bmd","directories":[{"id":"dir_Q7i3uqJUqPXP2dPT8Nd6F4","title":"src","inserted_at":"2019-10-21T14:35:32","updated_at":"2019-10-14T22:28:41","shortid":"rJlWiIOfKS","source_id":"src_9bsg6dMmmS6fxBFMbj6a9C","directory_shortid":null},{"id":"dir_5ftm8JrjzeuivKxJRPLzGD","title":"public","inserted_at":"2019-10-21T14:35:32","updated_at":"2019-10-14T22:28:40","shortid":"r1Wj8uzYH","source_id":"src_9bsg6dMmmS6fxBFMbj6a9C","directory_shortid":null}],"npm_registries":[],"tags":[],"picks":[],"like_count":0,"custom_template":null,"privacy":0,"view_count":12111,"external_resources":[],"version":13,"fork_count":8,"authorization":"read","id":"f1bmd","room_id":null,"pr_number":null,"sdk":false,"restricted":false,"user_liked":false,"v2":false,"owned":false,"base_git":null,"author":null,"original_git":null,"restrictions":{"free_plan_editing_restricted":false,"live_sessions_restricted":true}};