feat(useGridLayout): Add functionality for proposed useGridLayout (#2525)

CodyMoore240 · web-flow · commit 0c805a774f7a · 2020-10-04T21:27:39.000-06:00
Add functionality for a new hook called usGridLayout. other Layout hooks require the layout to be driven by the individual cells and row wrappers. This hook allows for a more stripped down markup
diff --git a/docs/src/pages/docs/api/useGridLayout.md b/docs/src/pages/docs/api/useGridLayout.md
@@ -0,0 +1,12 @@
+# `useGridLayout`
+
+- Plugin Hook
+- Optional
+
+`useGridLayout` is a plugin hook that adds support for headers and cells to be rendered as `div`s (or other non-table elements) with the immediate parent (table) controlling the layout using CSS Grid. This hook becomes useful when implementing both virtualized and resizable tables that must also be able to stretch to fill all available space. Uses a minimal amount of html to give greater control of styling. Works with `useResizeColumns`.
+
+### Table Properties
+
+- `getTableProps`
+  - **Usage Required**
+  - This core prop getter is required to get the correct stying for the layout
diff --git a/docs/src/pages/docs/api/useResizeColumns.md b/docs/src/pages/docs/api/useResizeColumns.md
@@ -3,7 +3,7 @@
 - Plugin Hook
 - Optional
 
-`useResizeColumns` is a plugin hook that adds support for resizing headers and cells when using non-table elements for layout eg. the `useBlockLayout` and `useAbsoluteLayout` hooks. It even supports resizing column groups!
+`useResizeColumns` is a plugin hook that adds support for resizing headers and cells when using non-table elements for layout eg. the `useBlockLayout`, `useAbsoluteLayout`, and `useGridLayout` hooks. It even supports resizing column groups!
 
 ### Table Options
 
diff --git a/examples/full-width-resizable-table-grid-layout/.babelrc b/examples/full-width-resizable-table-grid-layout/.babelrc
@@ -0,0 +1,4 @@
+{
+  "presets": ["react-app"],
+  "plugins": ["styled-components"]
+}
diff --git a/examples/full-width-resizable-table-grid-layout/.env b/examples/full-width-resizable-table-grid-layout/.env
@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=true
diff --git a/examples/full-width-resizable-table-grid-layout/.eslintrc b/examples/full-width-resizable-table-grid-layout/.eslintrc
@@ -0,0 +1,7 @@
+{
+  "extends": ["react-app", "prettier"],
+  "rules": {
+    // "eqeqeq": 0,
+    // "jsx-a11y/anchor-is-valid": 0
+  }
+}
diff --git a/examples/full-width-resizable-table-grid-layout/.gitignore b/examples/full-width-resizable-table-grid-layout/.gitignore
@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/examples/full-width-resizable-table-grid-layout/.rescriptsrc.js b/examples/full-width-resizable-table-grid-layout/.rescriptsrc.js
@@ -0,0 +1,29 @@
+const path = require('path')
+const resolveFrom = require('resolve-from')
+
+const fixLinkedDependencies = config => {
+  config.resolve = {
+    ...config.resolve,
+    alias: {
+      ...config.resolve.alias,
+      react$: resolveFrom(path.resolve('node_modules'), 'react'),
+      'react-dom$': resolveFrom(path.resolve('node_modules'), 'react-dom'),
+    },
+  }
+  return config
+}
+
+const includeSrcDirectory = config => {
+  config.resolve = {
+    ...config.resolve,
+    modules: [path.resolve('src'), ...config.resolve.modules],
+  }
+  return config
+}
+
+module.exports = [
+  ['use-babel-config', '.babelrc'],
+  ['use-eslint-config', '.eslintrc'],
+  fixLinkedDependencies,
+  // includeSrcDirectory,
+]
diff --git a/examples/full-width-resizable-table-grid-layout/README.md b/examples/full-width-resizable-table-grid-layout/README.md
@@ -0,0 +1,3 @@
+# Full Width Resizable Table (via useGridLayout)
+
+- `yarn` and `yarn start` to run and edit the example
diff --git a/examples/full-width-resizable-table-grid-layout/package.json b/examples/full-width-resizable-table-grid-layout/package.json
@@ -0,0 +1,35 @@
+{
+  "private": true,
+  "scripts": {
+    "start": "rescripts start",
+    "build": "rescripts build",
+    "test": "rescripts test",
+    "eject": "rescripts eject"
+  },
+  "dependencies": {
+    "namor": "^1.1.2",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "react-scripts": "^3.4.1",
+    "react-table": "latest",
+    "styled-components": "^4.3.2"
+  },
+  "devDependencies": {
+    "@rescripts/cli": "^0.0.11",
+    "@rescripts/rescript-use-babel-config": "^0.0.8",
+    "@rescripts/rescript-use-eslint-config": "^0.0.9",
+    "babel-eslint": "10.0.1"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/examples/full-width-resizable-table-grid-layout/public/favicon.ico b/examples/full-width-resizable-table-grid-layout/public/favicon.ico
diff --git a/examples/full-width-resizable-table-grid-layout/public/index.html b/examples/full-width-resizable-table-grid-layout/public/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/examples/full-width-resizable-table-grid-layout/public/manifest.json b/examples/full-width-resizable-table-grid-layout/public/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/examples/full-width-resizable-table-grid-layout/sandbox.config.json b/examples/full-width-resizable-table-grid-layout/sandbox.config.json
@@ -0,0 +1,3 @@
+{
+  "infiniteLoopProtection": false
+}
diff --git a/examples/full-width-resizable-table-grid-layout/src/App.js b/examples/full-width-resizable-table-grid-layout/src/App.js
@@ -0,0 +1,136 @@
+import React from 'react'
+import styled from 'styled-components'
+import {
+  useTable,
+  useResizeColumns,
+  useGridLayout
+} from 'react-table'
+
+import makeData from './makeData'
+
+const Styles = styled.div`
+  padding: 1rem;
+  ${'' /* These styles are suggested for the table fill all available space in its containing element */}
+  display: block;
+  ${'' /* These styles are required for a horizontaly scrollable table overflow */}
+  overflow: auto;
+
+  .table {
+    border: 1px solid black;
+    background-color: black;
+    grid-gap: 1px;
+
+    .cell,
+    .header {
+      padding: 0.5rem;
+      background-color: white;
+
+      .resizer {
+        right: 0;
+        background: blue;
+        width: 10px;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        z-index: 1;
+        ${'' /* prevents from scrolling while dragging on touch devices */}
+        touch-action :none;
+  
+        &.isResizing {
+          background: red;
+        }
+      }
+    }
+  }
+`
+
+function Table({ columns, data }) {
+  const {
+    getTableProps,
+    headerGroups,
+    rows,
+    prepareRow,
+  } = useTable(
+    {
+      columns,
+      data
+    },
+    useResizeColumns,
+    useGridLayout,
+  )
+
+  return (
+    <div {...getTableProps()} className="table">
+      {headerGroups.map(headerGroup => (
+        headerGroup.headers.map(column => (
+          <div key={column.id} {...column.getHeaderProps()} className="cell header">
+            {column.render('Header')}
+            {column.canResize && (
+              <div
+                {...column.getResizerProps()}
+                className={`resizer ${
+                  column.isResizing ? 'isResizing' : ''
+                  }`}
+              />
+            )}
+          </div>
+        ))
+      ))}
+      {rows.map(row =>
+        prepareRow(row) || (
+          row.cells.map(cell => (
+            <div {...cell.getCellProps()} className="cell">
+              {cell.render('Cell')}
+            </div>
+          ))
+        )
+      )}
+    </div>
+  )
+}
+
+function App() {
+  const columns = React.useMemo(
+    () => [
+      {
+        Header: 'First Name',
+        accessor: 'firstName',
+      },
+      {
+        Header: 'Last Name',
+        accessor: 'lastName',
+      },
+      {
+        Header: 'Age',
+        accessor: 'age',
+        width: 50,
+        align: 'right',
+      },
+      {
+        Header: 'Visits',
+        accessor: 'visits',
+        width: 50,
+        align: 'right',
+      },
+      {
+        Header: 'Status',
+        accessor: 'status',
+      },
+      {
+        Header: 'Profile Progress',
+        accessor: 'progress',
+      },
+    ],
+    []
+  )
+
+  const data = React.useMemo(() => makeData(20), [])
+
+  return (
+    <Styles>
+      <Table columns={columns} data={data} />
+    </Styles>
+  )
+}
+
+export default App
diff --git a/examples/full-width-resizable-table-grid-layout/src/App.test.js b/examples/full-width-resizable-table-grid-layout/src/App.test.js
@@ -0,0 +1,9 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import App from './App'
+
+it('renders without crashing', () => {
+  const div = document.createElement('div')
+  ReactDOM.render(<App />, div)
+  ReactDOM.unmountComponentAtNode(div)
+})
diff --git a/examples/full-width-resizable-table-grid-layout/src/index.css b/examples/full-width-resizable-table-grid-layout/src/index.css
@@ -0,0 +1,17 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
+
+* {
+  box-sizing: border-box;
+}
diff --git a/examples/full-width-resizable-table-grid-layout/src/index.js b/examples/full-width-resizable-table-grid-layout/src/index.js
@@ -0,0 +1,6 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import './index.css'
+import App from './App'
+
+ReactDOM.render(<App />, document.getElementById('root'))
diff --git a/examples/full-width-resizable-table-grid-layout/src/makeData.js b/examples/full-width-resizable-table-grid-layout/src/makeData.js
diff --git a/examples/full-width-resizable-table-grid-layout/yarn.lock b/examples/full-width-resizable-table-grid-layout/yarn.lock
diff --git a/src/index.js b/src/index.js
diff --git a/src/plugin-hooks/tests/useGridLayout.test.js b/src/plugin-hooks/tests/useGridLayout.test.js
diff --git a/src/plugin-hooks/useGridLayout.js b/src/plugin-hooks/useGridLayout.js

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +{
 +  "presets": ["react-app"],
 +  "plugins": ["styled-components"]
 +}
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+# Full Width Resizable Table (via useGridLayout)`
	`2`	`+`
	`3`	+- `yarn` and `yarn start` to run and edit the example