Move initial column visibility to useTable.

This change allows you to technically use React Table without a layout hook. Under that assumption, you would need to come up with your own styling mechanisms for display.

The useSimpleLayout merely adds a single `width` style to the prop getters for column headers and cells.

The useFlexLayout is much more robust. Personally though, I have moved away from both, and am just using raw `display: table-row/table-cell` styles to let my tables display naturally.

src/hooks/useFlexLayout.js

@@ -23,12 +23,7 @@ export const useFlexLayout = props => {
   } = props
 
   columnsHooks.push((columns, api) => {
-    const visibleColumns = columns.filter(column => {
-      column.visible =
-        typeof column.show === 'function' ? column.show(api) : !!column.show
-      return column.visible
-    })
-
+    const visibleColumns = columns.filter(column => column.visible)
     const columnMeasurements = {}
 
     let sumWidth = 0

src/hooks/useSimpleLayout.js

@@ -1,19 +1,9 @@
-
 export const useSimpleLayout = props => {
   const {
-    hooks: {
-      columns: columnsHooks,
-      getHeaderProps,
-      getCellProps
-    }
+    hooks: { columns: columnsHooks, getHeaderProps, getCellProps }
   } = props
 
-  columnsHooks.push((columns, api) => {
-    columns.forEach(column => {
-      column.visible =
-        typeof column.show === 'function' ? column.show(api) : !!column.show
-    })
-
+  columnsHooks.push(columns => {
     getHeaderProps.push(column => ({
       style: {
         boxSizing: 'border-box',
@@ -25,7 +15,8 @@ export const useSimpleLayout = props => {
       return {
         style: {
           boxSizing: 'border-box',
-          width: cell.column.width !== undefined ? `${cell.column.width}px` : 'auto'
+          width:
+            cell.column.width !== undefined ? `${cell.column.width}px` : 'auto'
         }
       }
     })

src/hooks/useTable.js

@@ -62,6 +62,11 @@ export const useTable = (props, ...plugins) => {
   applyHooks(api.hooks.beforeRender, undefined, api)
   if (debug) console.timeEnd('hooks.beforeRender')
 
+  api.columns.forEach(column => {
+    column.visible =
+      typeof column.show === 'function' ? column.show(api) : !!column.show
+  })
+
   if (debug) console.time('hooks.columns')
   api.columns = applyHooks(api.hooks.columns, api.columns, api)
   if (debug) console.timeEnd('hooks.columns')