: 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_Uv11iJp1M7Fgqqzfu9DE5o","is_binary":false,"title":".rescriptsrc.js","sha":null,"inserted_at":"2019-11-21T17:28:38","updated_at":"2019-10-10T21:45:53","upload_id":null,"shortid":"ryB9qIm6_r","source_id":"src_GAooacfyJ3LQV7pwipVh6s","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_Cw2wFcMErvoGzgeD2EQ46i","is_binary":false,"title":".gitignore","sha":null,"inserted_at":"2019-11-21T17:28:38","updated_at":"2019-10-10T21:45:53","upload_id":null,"shortid":"BkVcc8mp_r","source_id":"src_GAooacfyJ3LQV7pwipVh6s","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_QQLgB2HAHctwK9VRtibB1J","is_binary":false,"title":".eslintrc","sha":null,"inserted_at":"2019-11-21T17:28:38","updated_at":"2019-10-10T21:45:53","upload_id":null,"shortid":"ByQ958XTOB","source_id":"src_GAooacfyJ3LQV7pwipVh6s","directory_shortid":null},{"code":"SKIP_PREFLIGHT_CHECK=true","id":"mod_JZWsf3YsR9yTc5ngWBEDb6","is_binary":false,"title":".env","sha":null,"inserted_at":"2019-11-21T17:28:38","updated_at":"2019-10-10T21:45:53","upload_id":null,"shortid":"HJzccUX6_H","source_id":"src_GAooacfyJ3LQV7pwipVh6s","directory_shortid":null},{"code":"{\n \"presets\": [\"react-app\"],\n \"plugins\": [\"styled-components\"]\n}\n","id":"mod_2kP16DLbsiw54uW9GfVz3w","is_binary":false,"title":".babelrc","sha":null,"inserted_at":"2019-11-21T17:28:38","updated_at":"2019-10-10T21:45:53","upload_id":null,"shortid":"r1-q5LmT_B","source_id":"src_GAooacfyJ3LQV7pwipVh6s","directory_shortid":null},{"code":"{\n \"private\": true,\n \"scripts\": {\n \"start\": \"rescripts start\",\n \"build\": \"rescripts build\",\n \"test\": \"rescripts test\",\n \"eject\": \"rescripts eject\"\n },\n \"dependencies\": {\n \"namor\": \"^1.1.2\",\n \"react\": \"^16.8.6\",\n \"react-dom\": \"^16.8.6\",\n \"react-scripts\": \"3.0.1\",\n \"react-table\": \"latest\",\n \"styled-components\": \"^4.3.2\"\n },\n \"devDependencies\": {\n \"@rescripts\u002Fcli\": \"^0.0.11\",\n \"@rescripts\u002Frescript-use-babel-config\": \"^0.0.8\",\n \"@rescripts\u002Frescript-use-eslint-config\": \"^0.0.9\",\n \"babel-eslint\": \"10.0.1\"\n },\n \"browserslist\": {\n \"production\": [\"\u003E0.2%\", \"not dead\", \"not op_mini all\"],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n },\n \"keywords\": [],\n \"name\": \"tannerlinsley-react-table-row-selection-controlled\",\n \"description\": \"\"\n}\n","id":"mod_GxqDrhS6XEXq8UiBPC5bSC","is_binary":false,"title":"package.json","sha":null,"inserted_at":"2019-11-21T17:28:38","updated_at":"2020-01-13T14:08:16","upload_id":null,"shortid":"ryDq58Qa_r","source_id":"src_GAooacfyJ3LQV7pwipVh6s","directory_shortid":null},{"code":"import React, { useState } from \"react\";\nimport styled from \"styled-components\";\nimport { useTable, useRowSelect, useMountedLayoutEffect } 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, selectedRows, onSelectedRowsChange }) {\n \u002F\u002F Use the state and functions returned from useTable to build your UI\n const {\n getTableProps,\n getTableBodyProps,\n headerGroups,\n rows,\n prepareRow,\n state: { selectedRowIds }\n } = useTable(\n {\n columns,\n data,\n initialState: {\n selectedRowIds: selectedRows\n }\n \u002F\u002F state: {\n \u002F\u002F selectedRowIds: selectedRows\n \u002F\u002F }\n },\n useRowSelect\n );\n\n \u002F\u002F Keep parent\u002Fstore state in sync with local state\n \u002F\u002F No need to update on mount since we are passing initial state\n useMountedLayoutEffect(() =\u003E {\n console.log(\"SELECTED ROWS CHANGED\", selectedRowIds);\n onSelectedRowsChange && onSelectedRowsChange(selectedRowIds);\n }, [onSelectedRowsChange, selectedRowIds]);\n\n \u002F\u002F Render the UI for your table\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 \u003Cth {...column.getHeaderProps()}\u003E{column.render(\"Header\")}\u003C\u002Fth\u003E\n ))}\n \u003C\u002Ftr\u003E\n ))}\n \u003C\u002Fthead\u003E\n \u003Ctbody {...getTableBodyProps()}\u003E\n {rows.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 \u003C\u002F\u003E\n );\n}\n\nfunction App() {\n const columns = React.useMemo(\n () =\u003E [\n \u002F\u002F Let's make a column for selection\n {\n id: \"selection\",\n \u002F\u002F The header can use the table's getToggleAllRowsSelectedProps method\n \u002F\u002F to render a checkbox\n Header: ({ getToggleAllRowsSelectedProps }) =\u003E (\n \u003Cdiv\u003E\n \u003Cinput type=\"checkbox\" {...getToggleAllRowsSelectedProps()} \u002F\u003E\n \u003C\u002Fdiv\u003E\n ),\n \u002F\u002F The cell can use the individual row's getToggleRowSelectedProps method\n \u002F\u002F to the render a checkbox\n Cell: ({ row }) =\u003E (\n \u003Cdiv\u003E\n \u003Cinput type=\"checkbox\" {...row.getToggleRowSelectedProps()} \u002F\u003E\n \u003C\u002Fdiv\u003E\n )\n },\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(10), []);\n\n const [selectedRows, setSelectedRows] = useState({ \"0\": true, \"9\": true });\n\n const selectedRowKeys = Object.keys(selectedRows);\n\n return (\n \u003CStyles\u003E\n \u003CTable\n columns={columns}\n data={data}\n selectedRows={selectedRows}\n onSelectedRowsChange={setSelectedRows}\n \u002F\u003E\n \u003Cp\u003ESelected Rows: {selectedRowKeys.length}\u003C\u002Fp\u003E\n \u003Cpre\u003E\n \u003Ccode\u003E\n {JSON.stringify(\n {\n selectedRowKeys\n },\n null,\n 2\n )}\n \u003C\u002Fcode\u003E\n \u003C\u002Fpre\u003E\n \u003C\u002FStyles\u003E\n );\n}\n\nexport default App;\n","id":"mod_AeQXJLvgRxP8KjDupEzRXn","is_binary":false,"title":"App.js","sha":null,"inserted_at":"2019-11-21T17:28:38","updated_at":"2020-01-13T14:27:38","upload_id":null,"shortid":"H1occUmpdH","source_id":"src_GAooacfyJ3LQV7pwipVh6s","directory_shortid":"HkxqcLQT_B"}],"fork_count":176,"settings":{"ai_consent":null,"use_pint":false},"is_sse":false,"template":"create-react-app","npm_registries":[],"draft":true,"view_count":146811,"version":17,"title":"tannerlinsley\u002Freact-table: row-selection-controlled","privacy":0,"is_frozen":false,"id":"euyku","v2":false,"preview_secret":null,"custom_template":null,"sdk":false,"updated_at":"2020-01-29T18:09:56","pr_number":null,"npm_dependencies":{}};