: 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_FE1HQdLPEFrD6AKx114imn","is_binary":false,"title":".rescriptsrc.js","sha":null,"inserted_at":"2020-05-20T04:28:54","updated_at":"2020-05-15T21:42:05","upload_id":null,"shortid":"ByU822t29L","source_id":"src_NSJpFKxwikuhcsVf3tf8vT","directory_shortid":null},{"code":"import React from \"react\";\n\nimport Checkbox from \"@material-ui\u002Fcore\u002FCheckbox\";\nimport MaUTable from \"@material-ui\u002Fcore\u002FTable\";\nimport PropTypes from \"prop-types\";\nimport TableBody from \"@material-ui\u002Fcore\u002FTableBody\";\nimport TableCell from \"@material-ui\u002Fcore\u002FTableCell\";\nimport TableContainer from \"@material-ui\u002Fcore\u002FTableContainer\";\nimport TableFooter from \"@material-ui\u002Fcore\u002FTableFooter\";\nimport TableHead from \"@material-ui\u002Fcore\u002FTableHead\";\nimport TablePagination from \"@material-ui\u002Fcore\u002FTablePagination\";\nimport TablePaginationActions from \".\u002FTablePaginationActions\";\nimport TableRow from \"@material-ui\u002Fcore\u002FTableRow\";\nimport TableSortLabel from \"@material-ui\u002Fcore\u002FTableSortLabel\";\nimport Paper from \"@material-ui\u002Fcore\u002FPaper\";\nimport Divider from \"@material-ui\u002Fcore\u002FDivider\";\nimport TableToolbar from \".\u002FTableToolbar\";\nimport {\n useGlobalFilter,\n usePagination,\n useRowSelect,\n useSortBy,\n useTable,\n useBlockLayout,\n useFlexLayout,\n useAbsoluteLayout,\n useResizeColumns\n} from \"react-table\";\nimport { makeStyles, createStyles } from \"@material-ui\u002Fcore\u002Fstyles\";\n\nconst useStyles = makeStyles(theme =\u003E\n createStyles({\n root: {},\n table: {\n position: \"relative\"\n },\n header: {\n position: \"sticky\",\n backgroundColor: \"white\",\n zIndex: 2\n }\n })\n);\n\nconst IndeterminateCheckbox = React.forwardRef(\n ({ indeterminate, ...rest }, ref) =\u003E {\n const defaultRef = React.useRef();\n const resolvedRef = ref || defaultRef;\n\n React.useEffect(() =\u003E {\n resolvedRef.current.indeterminate = indeterminate;\n }, [resolvedRef, indeterminate]);\n\n return (\n \u003C\u003E\n \u003CCheckbox ref={resolvedRef} {...rest} \u002F\u003E\n \u003C\u002F\u003E\n );\n }\n);\n\nconst inputStyle = {\n padding: 0,\n margin: 0,\n border: 0,\n background: \"transparent\"\n};\n\n\u002F\u002F Create an editable cell renderer\nconst EditableCell = ({\n value: initialValue,\n row: { index },\n column: { id },\n updateMyData \u002F\u002F This is a custom function that we supplied to our table instance\n}) =\u003E {\n \u002F\u002F We need to keep and update the state of the cell normally\n const [value, setValue] = React.useState(initialValue);\n\n const onChange = e =\u003E {\n setValue(e.target.value);\n };\n\n \u002F\u002F We'll only update the external data when the input is blurred\n const onBlur = () =\u003E {\n updateMyData(index, id, value);\n };\n\n \u002F\u002F If the initialValue is changed externall, sync it up with our state\n React.useEffect(() =\u003E {\n setValue(initialValue);\n }, [initialValue]);\n\n return (\n \u003Cinput\n style={inputStyle}\n value={value}\n onChange={onChange}\n onBlur={onBlur}\n \u002F\u003E\n );\n};\n\nEditableCell.propTypes = {\n cell: PropTypes.shape({\n value: PropTypes.any.isRequired\n }),\n row: PropTypes.shape({\n index: PropTypes.number.isRequired\n }),\n column: PropTypes.shape({\n id: PropTypes.number.isRequired\n }),\n updateMyData: PropTypes.func.isRequired\n};\n\n\u002F\u002F Set our editable cell renderer as the default Cell renderer\nconst defaultColumn = {\n Cell: EditableCell\n};\n\nconst EnhancedTable = ({\n columns,\n data,\n setData,\n updateMyData,\n skipPageReset\n}) =\u003E {\n const classes = useStyles();\n const {\n getTableProps,\n headerGroups,\n prepareRow,\n page,\n gotoPage,\n setPageSize,\n preGlobalFilteredRows,\n setGlobalFilter,\n state: { pageIndex, pageSize, selectedRowIds, globalFilter }\n } = useTable(\n {\n columns,\n data,\n defaultColumn,\n autoResetPage: !skipPageReset,\n \u002F\u002F updateMyData isn't part of the API, but\n \u002F\u002F anything we put into these options will\n \u002F\u002F automatically be available on the instance.\n \u002F\u002F That way we can call this function from our\n \u002F\u002F cell renderer!\n updateMyData\n },\n useGlobalFilter,\n useSortBy,\n usePagination,\n useRowSelect,\n useBlockLayout, \n \u002F\u002F useResizeColumns,\n );\n\n const handleChangePage = (event, newPage) =\u003E {\n gotoPage(newPage);\n };\n\n const handleChangeRowsPerPage = event =\u003E {\n setPageSize(Number(event.target.value));\n };\n\n const removeByIndexs = (array, indexs) =\u003E\n array.filter((_, i) =\u003E !indexs.includes(i));\n\n const deleteUserHandler = event =\u003E {\n const newData = removeByIndexs(\n data,\n Object.keys(selectedRowIds).map(x =\u003E parseInt(x, 10))\n );\n setData(newData);\n };\n\n const addUserHandler = user =\u003E {\n const newData = data.concat([user]);\n setData(newData);\n };\n\n \u002F\u002F Render the UI for your table\n return (\n \u003CPaper\u003E\n \u003CTableToolbar\n numSelected={Object.keys(selectedRowIds).length}\n deleteUserHandler={deleteUserHandler}\n addUserHandler={addUserHandler}\n preGlobalFilteredRows={preGlobalFilteredRows}\n setGlobalFilter={setGlobalFilter}\n globalFilter={globalFilter}\n \u002F\u003E\n \u003CDivider \u002F\u003E\n \u003CTableContainer style={{ maxHeight: 440 }}\u003E\n \u003CMaUTable {...getTableProps()} className={classes.table}\u003E\n \u003CTableHead\u003E\n {headerGroups.map((headerGroup, index) =\u003E {\n let headerProps = headerGroup.getHeaderGroupProps();\n headerProps.style.top = index * 61;\n return (\n \u003CTableRow\n \u002F\u002F {...headerGroup.getHeaderGroupProps()}\n {...headerProps}\n className={classes.header}\n \u003E\n {headerGroup.headers.map(column =\u003E (\n \u003CTableCell\n {...(column.id === \"selection\"\n ? column.getHeaderProps()\n : column.getHeaderProps(column.getSortByToggleProps()))}\n \u003E\n {column.render(\"Header\")}\n {column.id !== \"selection\" ? (\n \u003CTableSortLabel\n active={column.isSorted}\n \u002F\u002F react-table has a unsorted state which is not treated here\n direction={column.isSortedDesc ? \"desc\" : \"asc\"}\n \u002F\u003E\n ) : null}\n \u003C\u002FTableCell\u003E\n ))}\n \u003C\u002FTableRow\u003E\n );\n })}\n \u003C\u002FTableHead\u003E\n \u003CTableBody\u003E\n {page.map((row, i) =\u003E {\n prepareRow(row);\n return (\n \u003CTableRow {...row.getRowProps()}\u003E\n {row.cells.map(cell =\u003E {\n return (\n \u003CTableCell {...cell.getCellProps()}\u003E\n {cell.render(\"Cell\")}\n \u003C\u002FTableCell\u003E\n );\n })}\n \u003C\u002FTableRow\u003E\n );\n })}\n \u003C\u002FTableBody\u003E\n \u003C\u002FMaUTable\u003E\n \u003C\u002FTableContainer\u003E\n \u003CDivider \u002F\u003E\n \u003CTablePagination\n rowsPerPageOptions={[5, 10, 25, { label: \"All\", value: data.length }]}\n colSpan={3}\n count={data.length}\n rowsPerPage={pageSize}\n page={pageIndex}\n SelectProps={{\n inputProps: { \"aria-label\": \"rows per page\" },\n native: true\n }}\n onChangePage={handleChangePage}\n onChangeRowsPerPage={handleChangeRowsPerPage}\n ActionsComponent={TablePaginationActions}\n \u002F\u003E\n \u003C\u002FPaper\u003E\n );\n};\n\nEnhancedTable.propTypes = {\n columns: PropTypes.array.isRequired,\n data: PropTypes.array.isRequired,\n updateMyData: PropTypes.func.isRequired,\n setData: PropTypes.func.isRequired,\n skipPageReset: PropTypes.bool.isRequired\n};\n\nexport default EnhancedTable;\n","id":"mod_KFahd8CHSJnM8UoKNhmwTB","is_binary":false,"title":"EnhancedTable.js","sha":null,"inserted_at":"2020-05-20T04:28:54","updated_at":"2020-05-28T02:46:23","upload_id":null,"shortid":"HJJgIhhFhqU","source_id":"src_NSJpFKxwikuhcsVf3tf8vT","directory_shortid":"SyWUn3Fh5I"},{"code":"import React from \"react\";\n\nimport CssBaseline from \"@material-ui\u002Fcore\u002FCssBaseline\";\nimport Container from \"@material-ui\u002Fcore\u002FContainer\";\nimport EnhancedTable from \".\u002Fcomponents\u002FEnhancedTable\";\nimport makeData from \".\u002FmakeData\";\n\nconst App = () =\u003E {\n const columns = React.useMemo(\n () =\u003E [\n {\n Header: \"First Name\",\n accessor: \"firstName\",\n minWidth: 200,\n \u002F\u002F width: \"100%\",\n maxWidth: 500,\n Cell: row =\u003E {\n return (\n \u003Ca href=\"#!\"\u003E\n {Array(row.row.index + 1)\n .fill(row.value)\n .join(\" \")}\n \u003C\u002Fa\u003E\n );\n }\n },\n {\n Header: \"Last Name\",\n accessor: \"lastName\",\n minWidth: 50,\n maxWidth: 500\n },\n {\n Header: \"Age\",\n accessor: \"age\",\n width: 50\n },\n {\n Header: \"Visits\",\n accessor: \"visits\",\n width: 50\n },\n {\n Header: \"Status\",\n accessor: \"status\",\n width: 150\n },\n {\n Header: \"Profile Progress\",\n accessor: \"progress\"\n \u002F\u002F minWidth: \"100%\"\n }\n ],\n []\n );\n\n const [data, setData] = React.useState(React.useMemo(() =\u003E makeData(20), []));\n const [skipPageReset, setSkipPageReset] = React.useState(false);\n\n \u002F\u002F We need to keep the table from resetting the pageIndex when we\n \u002F\u002F Update data. So we can keep track of that flag with a ref.\n\n \u002F\u002F When our cell renderer calls updateMyData, we'll use\n \u002F\u002F the rowIndex, columnId and new value to update the\n \u002F\u002F original data\n const updateMyData = (rowIndex, columnId, value) =\u003E {\n \u002F\u002F We also turn on the flag to not reset the page\n setSkipPageReset(true);\n setData(old =\u003E\n old.map((row, index) =\u003E {\n if (index === rowIndex) {\n return {\n ...old[rowIndex],\n [columnId]: value\n };\n }\n return row;\n })\n );\n };\n\n return (\n \u003Cdiv\u003E\n \u003CCssBaseline \u002F\u003E\n \u003CContainer\u003E\n \u003CEnhancedTable\n columns={columns}\n data={data}\n setData={setData}\n updateMyData={updateMyData}\n skipPageReset={skipPageReset}\n \u002F\u003E\n \u003C\u002FContainer\u003E\n \u003C\u002Fdiv\u003E\n );\n};\n\nexport default App;\n","id":"mod_LnoymRYsgHrEVRzDVkXhbk","is_binary":false,"title":"App.js","sha":null,"inserted_at":"2020-05-20T04:28:54","updated_at":"2020-05-28T02:50:37","upload_id":null,"shortid":"Sy2L33FhqU","source_id":"src_NSJpFKxwikuhcsVf3tf8vT","directory_shortid":"H1l8hntnc8"}],"forked_template":{"id":"sbtempl_KCm2nK3iqgxM8tgsjMTcPq","title":"tannerlinsley\u002Freact-table: material-UI-enhanced-table","v2":false,"color":"#61DAFB","url":null,"published":false,"sdk":false,"icon_url":"github","official":false},"base_git":null,"is_sse":false,"updated_at":"2020-05-28T02:50:37","author":{"id":"user_3dH5vdwWi9xwGxJm9FUnrG","name":"Alvin John","username":"alvinbabujohn","avatar_url":"https:\u002F\u002Favatars1.githubusercontent.com\u002Fu\u002F38516261?v=4","personal_workspace_id":"ws_URudf2QoFLwZCQDCWHbpe7","subscription_plan":null,"subscription_since":null},"settings":{"ai_consent":null},"user_liked":false,"restricted":false,"room_id":null,"version":156,"forked_from_sandbox":{"alias":"loving-hopper-xfik9","id":"xfik9","title":null,"template":"create-react-app","inserted_at":"2020-05-16T14:34:41","updated_at":"2020-05-16T16:14:21","git":null,"privacy":0,"sdk":false,"custom_template":null},"id":"zwd6b","pr_number":null,"fork_count":1,"original_git":{"path":"examples\u002Fmaterial-UI-enhanced-table","branch":"master","repo":"react-table","username":"tannerlinsley","commit_sha":"7c47a99010c348a4f612f2263c10546c7199d86d"},"external_resources":[],"draft":true,"like_count":0,"view_count":2269,"screenshot_url":"https:\u002F\u002Fscreenshots.codesandbox.io\u002Fzwd6b\u002F156.png","git":null};