fix: fix path getters, better plugin hook integration, renaming things

examples/editable-data/src/App.js

@@ -46,20 +46,28 @@ const Styles = styled.div`
 
 // Create an editable cell renderer
 const EditableCell = ({
-  value: initialValue,
+  cell: { value: initialValue },
   row: { index },
   column: { id },
   updateMyData, // This is a custom function that we supplied to our table instance
 }) => {
   // We need to keep and update the state of the cell normally
   const [value, setValue] = React.useState(initialValue)
+
   const onChange = e => {
     setValue(e.target.value)
   }
+
   // We'll only update the external data when the input is blurred
   const onBlur = () => {
     updateMyData(index, id, value)
   }
+
+  // If the initialValue is changed externall, sync it up with our state
+  React.useEffect(() => {
+    setValue(initialValue)
+  }, [initialValue])
+
   return <input value={value} onChange={onChange} onBlur={onBlur} />
 }
 
@@ -221,6 +229,7 @@ function App() {
   )
 
   const [data, setData] = React.useState(() => makeData(20))
+  const [originalData] = React.useState(data)
 
   // We need to keep the table from resetting the pageIndex when we
   // Update data. So we can keep track of that flag with a ref.
@@ -232,8 +241,8 @@ function App() {
   const updateMyData = (rowIndex, columnID, value) => {
     // We also turn on the flag to not reset the page
     skipPageResetRef.current = true
-    setData(old => {
-      return old.filter((row, index) => {
+    setData(old =>
+      old.map((row, index) => {
         if (index === rowIndex) {
           return {
             ...old[rowIndex],
@@ -242,22 +251,19 @@ function App() {
         }
         return row
       })
-    })
+    )
   }
 
   // After data chagnes, we turn the flag back off
   // so that if data actually changes when we're not
   // editing it, the page is reset
-  React.useEffect(
-    () => {
-      skipPageResetRef.current = false
-    },
-    [data]
-  )
+  React.useEffect(() => {
+    skipPageResetRef.current = false
+  }, [data])
 
   // Let's add a data resetter/randomizer to help
   // illustrate that flow...
-  const resetData = () => setData(makeData(20))
+  const resetData = () => setData(originalData)
 
   return (
     <Styles>

examples/grouping/src/App.js

@@ -68,7 +68,7 @@ function Table({ columns, data }) {
                   {column.canGroupBy ? (
                     // If the column can be grouped, let's add a toggle
                     <span {...column.getGroupByToggleProps()}>
-                      {column.grouped ? '🛑 ' : '👊 '}
+                      {column.isGrouped ? '🛑 ' : '👊 '}
                     </span>
                   ) : null}
                   {column.render('Header')}
@@ -90,16 +90,16 @@ function Table({ columns, data }) {
                         // from the useGroupBy hook
                         {...cell.getCellProps()}
                         style={{
-                          background: cell.grouped
+                          background: cell.isGrouped
                             ? '#0aff0082'
-                            : cell.aggregated
+                            : cell.isAggregated
                             ? '#ffa50078'
-                            : cell.repeatedValue
+                            : cell.isRepeatedValue
                             ? '#ff000042'
                             : 'white',
                         }}
                       >
-                        {cell.grouped ? (
+                        {cell.isGrouped ? (
                           // If it's a grouped cell, add an expander and row count
                           <>
                             <span {...row.getExpandedToggleProps()}>
@@ -107,11 +107,11 @@ function Table({ columns, data }) {
                             </span>{' '}
                             {cell.render('Cell')} ({row.subRows.length})
                           </>
-                        ) : cell.aggregated ? (
+                        ) : cell.isAggregated ? (
                           // If the cell is aggregated, use the Aggregated
                           // renderer for cell
                           cell.render('Aggregated')
-                        ) : cell.repeatedValue ? null : ( // For cells with repeated values, render null
+                        ) : cell.isRepeatedValue ? null : ( // For cells with repeated values, render null
                           // Otherwise, just render the regular cell
                           cell.render('Cell')
                         )}
@@ -196,7 +196,7 @@ function App() {
             // then sum any of those counts if they are
             // aggregated further
             aggregate: ['sum', 'count'],
-            Aggregated: ({ value }) => `${value} Names`,
+            Aggregated: ({ cell: { value } }) => `${value} Names`,
           },
           {
             Header: 'Last Name',
@@ -206,7 +206,7 @@ function App() {
             // being aggregated, then sum those counts if
             // they are aggregated further
             aggregate: ['sum', 'uniqueCount'],
-            Aggregated: ({ value }) => `${value} Unique Names`,
+            Aggregated: ({ cell: { value } }) => `${value} Unique Names`,
           },
         ],
       },
@@ -218,14 +218,14 @@ function App() {
             accessor: 'age',
             // Aggregate the average age of visitors
             aggregate: 'average',
-            Aggregated: ({ value }) => `${value} (avg)`,
+            Aggregated: ({ cell: { value } }) => `${value} (avg)`,
           },
           {
             Header: 'Visits',
             accessor: 'visits',
             // Aggregate the sum of all visits
             aggregate: 'sum',
-            Aggregated: ({ value }) => `${value} (total)`,
+            Aggregated: ({ cell: { value } }) => `${value} (total)`,
           },
           {
             Header: 'Status',
@@ -236,7 +236,7 @@ function App() {
             accessor: 'progress',
             // Use our custom roundedMedian aggregator
             aggregate: roundedMedian,
-            Aggregated: ({ value }) => `${value} (med)`,
+            Aggregated: ({ cell: { value } }) => `${value} (med)`,
           },
         ],
       },

examples/kitchen-sink/src/makeData.js

@@ -10,12 +10,8 @@ const range = len => {
 
 const newPerson = () => {
   const statusChance = Math.random()
-
-  let firstName = namor.generate({ words: 1, numbers: 0 })
-  firstName = firstName.slice(0, 1) + '.' + firstName.slice(1, firstName.length)
-
   return {
-    firstName,
+    firstName: namor.generate({ words: 1, numbers: 0 }),
     lastName: namor.generate({ words: 1, numbers: 0 }),
     age: Math.floor(Math.random() * 30),
     visits: Math.floor(Math.random() * 100),

examples/sorting/README.md

@@ -37,7 +37,7 @@ function MyTable() {
 +             <th {...column.getHeaderProps(column.getSortByToggleProps())}>
                 {column.render('Header')}
 +               <span>
-+                 {column.sorted ? (column.sortedDesc ? ' 🔽' : ' 🔼') : ''}
++                 {column.isSorted ? (column.isSortedDesc ? ' 🔽' : ' 🔼') : ''}
 +               </span>
               </th>
             ))}

examples/sorting/src/App.js

@@ -65,7 +65,11 @@ function Table({ columns, data }) {
                   {column.render('Header')}
                   {/* Add a sort direction indicator */}
                   <span>
-                    {column.sorted ? (column.sortedDesc ? ' 🔽' : ' 🔼') : ''}
+                    {column.isSorted
+                      ? column.isSortedDesc
+                        ? ' 🔽'
+                        : ' 🔼'
+                      : ''}
                   </span>
                 </th>
               ))}