v7.0.0-alpha.27

docs/api.md

@@ -438,12 +438,12 @@ The following properties are available on every `Column` object returned by the
   - This function is used to resolve any props needed for this column's UI that is responsible for toggling the sort direction when the user clicks it.
   - You can use the `getSortByToggleProps` hook to extend its functionality.
   - Custom props may be passed. **NOTE: Custom props may override built-in sortBy props, so be careful!**
-- `sorted: Boolean`
+- `isSorted: Boolean`
   - Denotes whether this column is currently being sorted
 - `sortedIndex: Int`
   - If the column is currently sorted, this integer will be the index in the `sortBy` array from state that corresponds to this column.
   - If this column is not sorted, the index will always be `-1`
-- `sortedDesc: Bool`
+- `isSortedDesc: Bool`
   - If the column is currently sorted, this denotes whether the column's sort direction is descending or not.
   - If `true`, the column is sorted `descending`
   - If `false`, the column is sorted `ascending`
@@ -477,10 +477,10 @@ function Table({ columns, data }) {
                 <span>
                   {/* Add a sort direction indicator */}
                   <span>
-                    {column.sorted ? (column.sortedDesc ? ' 🔽' : ' 🔼') : ''}
+                    {column.isSorted ? (column.isSortedDesc ? ' 🔽' : ' 🔼') : ''}
                   </span>
                   {/* Add a sort index indicator */}
-                  <span>({column.sorted ? column.sortedIndex + 1 : ''})</span>
+                  <span>({column.isSorted ? column.sortedIndex + 1 : ''})</span>
                 </span>
               </th>
             ))}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-table",
-  "version": "7.0.0-alpha.26",
+  "version": "7.0.0-alpha.27",
   "description": "A fast, lightweight, opinionated table and datagrid built on React",
   "license": "MIT",
   "homepage": "https://github.com/tannerlinsley/react-table#readme",

src/plugin-hooks/tests/useRowSelect.test.js

@@ -4,7 +4,7 @@ import { useTable } from '../../hooks/useTable'
 import { useRowSelect } from '../useRowSelect'
 import { useExpanded } from '../useExpanded'
 
-const data = [
+const dataPiece = [
   {
     firstName: 'tanner',
     lastName: 'linsley',
@@ -58,6 +58,15 @@ const data = [
   },
 ]
 
+const data = [
+  ...dataPiece,
+  ...dataPiece,
+  ...dataPiece,
+  ...dataPiece,
+  ...dataPiece,
+  ...dataPiece,
+]
+
 function Table({ columns, data }) {
   // Use the state and functions returned from useTable to build your UI
   const {
@@ -141,7 +150,10 @@ function App() {
       {
         id: 'selectedStatus',
         Cell: ({ row }) => (
-          <div>{row.isSelected ? 'Selected' : 'Not Selected'}</div>
+          <div>
+            Row {row.path.join('.')}{' '}
+            {row.isSelected ? 'Selected' : 'Not Selected'}
+          </div>
         ),
       },
       {
@@ -218,7 +230,6 @@ test('renders a table with selectable rows', () => {
 
   const fragment8 = asFragment()
 
-
   expect(fragment1).toMatchDiffSnapshot(fragment2)
   expect(fragment2).toMatchDiffSnapshot(fragment3)
   expect(fragment3).toMatchDiffSnapshot(fragment4)

src/plugin-hooks/useRowSelect.js

@@ -70,6 +70,7 @@ function useMain(instance) {
 
   const toggleRowSelected = (path, set) => {
     const key = path.join('.')
+    const childRowPrefixKey = [key, '.'].join('')
 
     return setState(old => {
       // Join the paths of deep rows
@@ -81,11 +82,15 @@ function useMain(instance) {
 
       if (!exists && shouldExist) {
         rowPaths.forEach(rowPath => {
-          if (rowPath.startsWith(key)) newSelectedRows.add(rowPath)
+          if (rowPath === key || rowPath.startsWith(childRowPrefixKey)) {
+            newSelectedRows.add(rowPath)
+          }
         })
       } else if (exists && !shouldExist) {
         rowPaths.forEach(rowPath => {
-          if (rowPath.startsWith(key)) newSelectedRows.delete(rowPath)
+          if (rowPath === key || rowPath.startsWith(childRowPrefixKey)) {
+            newSelectedRows.delete(rowPath)
+          }
         })
       } else {
         return old
@@ -128,7 +133,6 @@ function useMain(instance) {
       )
       row.toggleRowSelected = set => {
         set = typeof set !== 'undefined' ? set : !row.isSelected
-        console.log(subRowPaths)
         subRowPaths.forEach(path => {
           toggleRowSelected(path, set)
         })