You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Message: Component "Header" is declared during render. You should move this declaration outside of render to ensure this component's state is persisted across re-renders of its parent. If this component is memoized, you should still refactor the component to be able to move it outside of render. If you want to reset its state use a key instead (see https://reactjs.org/docs/lists-and-keys.html#keys).
90|// Build our expander column91|id: 'expander',// Make sure it has an ID>92|Header: ({ getToggleAllRowsExpandedProps, isAllRowsExpanded })=>(|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^>93|<span{...getToggleAllRowsExpandedProps()}>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
>94|{isAllRowsExpanded ? '👇' : '👉'}
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
>95|</span>|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^>96|),|^^^^^^^^^^97|Cell: ({ row })=>98|// Use the row.canExpand and row.getToggleRowExpandedProps prop getter99|// to build the toggle for expanding a row
Rule: react-hooks/no-nested-components
Message: Component "Cell" is declared during render. You should move this declaration outside of render to ensure this component's state is persisted across re-renders of its parent. If this component is memoized, you should still refactor the component to be able to move it outside of render. If you want to reset its state use a key instead (see https://reactjs.org/docs/lists-and-keys.html#keys).
95|</span>
96 | ),
>97|Cell: ({ row })=>|^^^^^^^^^^^^>98|// Use the row.canExpand and row.getToggleRowExpandedProps prop getter|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^>99|// to build the toggle for expanding a row|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^>100|row.canExpand ? (|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^>101|<span|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^> 102 | {...row.getToggleRowExpandedProps({|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^>103|style: {|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^>104|// We can even use the row.depth property|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^>105|// and paddingLeft to indicate the depth|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^>106|// of the row|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^>107|paddingLeft: `${row.depth*2}rem`,|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^>108|},
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
>109|})}|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^>110|>|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^>111|{row.isExpanded ? '👇' : '👉'}
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
>112|</span>|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^>113|) : null,|^^^^^^^^^^^^^^^^^^^114|},115|{116|Header: 'Name',
Rule: react-hooks/no-nested-components
Message: Component "Header" is declared during render. You should move this declaration outside of render to ensure this component's state is persisted across re-renders of its parent. If this component is memoized, you should still refactor the component to be able to move it outside of render. If you want to reset its state use a key instead (see https://reactjs.org/docs/lists-and-keys.html#keys).
147|// The header can use the table's getToggleAllRowsSelectedProps method148|// to render a checkbox>149|Header: ({ getToggleAllRowsSelectedProps })=>(|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^>150|<div>
| ^^^^^^^^^^^^^^^^^
>151|<IndeterminateCheckbox{...getToggleAllRowsSelectedProps()}/>
| ^^^^^^^^^^^^^^^^^
>152|</div>|^^^^^^^^^^^^^^^^^>153|),|^^^^^^^^^^^^154|// The cell can use the individual row's getToggleRowSelectedProps method155|// to the render a checkbox156|Cell: ({ row })=>(
Rule: react-hooks/no-nested-components
Message: Component "Cell" is declared during render. You should move this declaration outside of render to ensure this component's state is persisted across re-renders of its parent. If this component is memoized, you should still refactor the component to be able to move it outside of render. If you want to reset its state use a key instead (see https://reactjs.org/docs/lists-and-keys.html#keys).
154|// The cell can use the individual row's getToggleRowSelectedProps method155|// to the render a checkbox>156|Cell: ({ row })=>(|^^^^^^^^^^^^^^>157|<div>
| ^^^^^^^^^^^^^^^^^
>158|<IndeterminateCheckbox{...row.getToggleRowSelectedProps()}/>
| ^^^^^^^^^^^^^^^^^
>159|</div>|^^^^^^^^^^^^^^^^^>160|),|^^^^^^^^^^^^161|},162| ...columns,163|]);
Rule: react-hooks/no-nested-components
Message: Component "Header" is declared during render. You should move this declaration outside of render to ensure this component's state is persisted across re-renders of its parent. If this component is memoized, you should still refactor the component to be able to move it outside of render. If you want to reset its state use a key instead (see https://reactjs.org/docs/lists-and-keys.html#keys).
75|id: 'expander',// Make sure it has an ID76|// Build our expander column>77|Header: ({ allColumns,state: { groupBy }})=>{|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^>78|returngroupBy.map(columnId=>{|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^>79|constcolumn=allColumns.find(d=>d.id===columnId)|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^>80||^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^>81|return(|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^>82|<span{...column.getHeaderProps()}>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
>83|{column.canGroupBy ? (|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^>84|// If the column can be grouped, let's add a toggle|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^>85|<span{...column.getGroupByToggleProps()}>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
>86|{column.isGrouped ? '🛑 ' : '👊 '}
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
>87|</span>|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^>88|) : null}
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
>89|{column.render('Header')}{' '}
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
>90|</span>|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^>91|)|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^>92|})|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^>93|},|^^^^^^^^^^^^^^94|Cell: ({ row })=>{95|if(row.canExpand){96|constgroupedCell=row.allCells.find(d=>d.isGrouped)
Rule: react-hooks/no-nested-components
Message: Component "Cell" is declared during render. You should move this declaration outside of render to ensure this component's state is persisted across re-renders of its parent. If this component is memoized, you should still refactor the component to be able to move it outside of render. If you want to reset its state use a key instead (see https://reactjs.org/docs/lists-and-keys.html#keys).
92|})93|},>94|Cell: ({ row })=>{|^^^^^^^^^^^^^^>95|if(row.canExpand){|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^>96|constgroupedCell=row.allCells.find(d=>d.isGrouped)|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^>97||^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^>98|return(|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^>99|<span|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^> 100 | {...row.getToggleRowExpandedProps({|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^>101|style: {|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^>102|// We can even use the row.depth property|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^>103|// and paddingLeft to indicate the depth|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^>104|// of the row|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^>105|paddingLeft: `${row.depth*2}rem`,|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^>106|},
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
>107|})}|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^>108|>|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^>109|{row.isExpanded ? '👇' : '👉'}{groupedCell.render('Cell')}{' '}
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
>110|({row.subRows.length})
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
>111|</span>|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^>112|)|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^>113|}|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^>114||^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^>115|returnnull|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^>116|},|^^^^^^^^^^^^^^117|},118| ...columns,119|]
Rule: react-hooks/no-nested-components
Message: Component "Aggregated" is declared during render. You should move this declaration outside of render to ensure this component's state is persisted across re-renders of its parent. If this component is memoized, you should still refactor the component to be able to move it outside of render. If you want to reset its state use a key instead (see https://reactjs.org/docs/lists-and-keys.html#keys).
261|// aggregated further262|aggregate: 'count',>263|Aggregated: ({ value })=>`${value} Names`,|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^264|},265|{266|Header: 'Last Name',
Rule: react-hooks/no-nested-components
Message: Component "Aggregated" is declared during render. You should move this declaration outside of render to ensure this component's state is persisted across re-renders of its parent. If this component is memoized, you should still refactor the component to be able to move it outside of render. If you want to reset its state use a key instead (see https://reactjs.org/docs/lists-and-keys.html#keys).
271|// they are aggregated further272|aggregate: 'uniqueCount',>273|Aggregated: ({ value })=>`${value} Unique Names`,|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^274|},275|],276|},
Rule: react-hooks/no-nested-components
Message: Component "Aggregated" is declared during render. You should move this declaration outside of render to ensure this component's state is persisted across re-renders of its parent. If this component is memoized, you should still refactor the component to be able to move it outside of render. If you want to reset its state use a key instead (see https://reactjs.org/docs/lists-and-keys.html#keys).
283|// Aggregate the average age of visitors284|aggregate: 'average',>285|Aggregated: ({ value })=>`${value} (avg)`,|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^286|},287|{288|Header: 'Visits',
Rule: react-hooks/no-nested-components
Message: Component "Aggregated" is declared during render. You should move this declaration outside of render to ensure this component's state is persisted across re-renders of its parent. If this component is memoized, you should still refactor the component to be able to move it outside of render. If you want to reset its state use a key instead (see https://reactjs.org/docs/lists-and-keys.html#keys).
290|// Aggregate the sum of all visits291|aggregate: 'sum',>292|Aggregated: ({ value })=>`${value} (total)`,|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^293|},294|{295|Header: 'Status',
Rule: react-hooks/no-nested-components
Message: Component "Aggregated" is declared during render. You should move this declaration outside of render to ensure this component's state is persisted across re-renders of its parent. If this component is memoized, you should still refactor the component to be able to move it outside of render. If you want to reset its state use a key instead (see https://reactjs.org/docs/lists-and-keys.html#keys).
301|// Use our custom roundedMedian aggregator302|aggregate: roundedMedian,>303|Aggregated: ({ value })=>`${value} (med)`,|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^304|},305|],306|},
Rule: react-hooks/no-nested-components
Message: Component "Header" is declared during render. You should move this declaration outside of render to ensure this component's state is persisted across re-renders of its parent. If this component is memoized, you should still refactor the component to be able to move it outside of render. If you want to reset its state use a key instead (see https://reactjs.org/docs/lists-and-keys.html#keys).
324|// The header can use the table's getToggleAllRowsSelectedProps method325|// to render a checkbox>326|Header: ({ getToggleAllRowsSelectedProps })=>(|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^>327|<div>
| ^^^^^^^^^^^^^^^^^^^
>328|<IndeterminateCheckbox{...getToggleAllRowsSelectedProps()}/>
| ^^^^^^^^^^^^^^^^^^^
>329|</div>|^^^^^^^^^^^^^^^^^^^>330|),|^^^^^^^^^^^^^^331|// The cell can use the individual row's getToggleRowSelectedProps method332|// to the render a checkbox333|Cell: ({ row })=>(
Rule: react-hooks/no-nested-components
Message: Component "Cell" is declared during render. You should move this declaration outside of render to ensure this component's state is persisted across re-renders of its parent. If this component is memoized, you should still refactor the component to be able to move it outside of render. If you want to reset its state use a key instead (see https://reactjs.org/docs/lists-and-keys.html#keys).
331|// The cell can use the individual row's getToggleRowSelectedProps method332|// to the render a checkbox>333|Cell: ({ row })=>(|^^^^^^^^^^^^^^>334|<div>
| ^^^^^^^^^^^^^^^^^^^
>335|<IndeterminateCheckbox{...row.getToggleRowSelectedProps()}/>
| ^^^^^^^^^^^^^^^^^^^
>336|</div>|^^^^^^^^^^^^^^^^^^^>337|),|^^^^^^^^^^^^^^338|},339| ...columns,340|]
Rule: react-hooks/no-nested-components
Message: Component "Aggregated" is declared during render. You should move this declaration outside of render to ensure this component's state is persisted across re-renders of its parent. If this component is memoized, you should still refactor the component to be able to move it outside of render. If you want to reset its state use a key instead (see https://reactjs.org/docs/lists-and-keys.html#keys).
541|// aggregated further542|aggregate: 'count',>543|Aggregated: ({ value })=>`${value} Names`,|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^544|},545|{546|Header: 'Last Name',
Rule: react-hooks/no-nested-components
Message: Component "Aggregated" is declared during render. You should move this declaration outside of render to ensure this component's state is persisted across re-renders of its parent. If this component is memoized, you should still refactor the component to be able to move it outside of render. If you want to reset its state use a key instead (see https://reactjs.org/docs/lists-and-keys.html#keys).
553|// they are aggregated further554|aggregate: 'uniqueCount',>555|Aggregated: ({ value })=>`${value} Unique Names`,|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^556|},557|],558|},
Rule: react-hooks/no-nested-components
Message: Component "Aggregated" is declared during render. You should move this declaration outside of render to ensure this component's state is persisted across re-renders of its parent. If this component is memoized, you should still refactor the component to be able to move it outside of render. If you want to reset its state use a key instead (see https://reactjs.org/docs/lists-and-keys.html#keys).
567|// Aggregate the average age of visitors568|aggregate: 'average',>569|Aggregated: ({ value })=>`${value} (avg)`,|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^570|},571|{572|Header: 'Visits',
Rule: react-hooks/no-nested-components
Message: Component "Aggregated" is declared during render. You should move this declaration outside of render to ensure this component's state is persisted across re-renders of its parent. If this component is memoized, you should still refactor the component to be able to move it outside of render. If you want to reset its state use a key instead (see https://reactjs.org/docs/lists-and-keys.html#keys).
576|// Aggregate the sum of all visits577|aggregate: 'sum',>578|Aggregated: ({ value })=>`${value} (total)`,|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^579|},580|{581|Header: 'Status',
Rule: react-hooks/no-nested-components
Message: Component "Aggregated" is declared during render. You should move this declaration outside of render to ensure this component's state is persisted across re-renders of its parent. If this component is memoized, you should still refactor the component to be able to move it outside of render. If you want to reset its state use a key instead (see https://reactjs.org/docs/lists-and-keys.html#keys).
591|// Use our custom roundedMedian aggregator592|aggregate: roundedMedian,>593|Aggregated: ({ value })=>`${value} (med)`,|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^594|},595|],596|},
Rule: react-hooks/no-nested-components
Message: Component "Aggregated" is declared during render. You should move this declaration outside of render to ensure this component's state is persisted across re-renders of its parent. If this component is memoized, you should still refactor the component to be able to move it outside of render. If you want to reset its state use a key instead (see https://reactjs.org/docs/lists-and-keys.html#keys).
514|// aggregated further515|aggregate: 'count',>516|Aggregated: ({ value })=>`${value} Names`,|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^517|},518|{519|Header: 'Last Name',
Rule: react-hooks/no-nested-components
Message: Component "Aggregated" is declared during render. You should move this declaration outside of render to ensure this component's state is persisted across re-renders of its parent. If this component is memoized, you should still refactor the component to be able to move it outside of render. If you want to reset its state use a key instead (see https://reactjs.org/docs/lists-and-keys.html#keys).
526|// they are aggregated further527|aggregate: 'uniqueCount',>528|Aggregated: ({ value })=>`${value} Unique Names`,|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^529|},530|],531|},
Rule: react-hooks/no-nested-components
Message: Component "Aggregated" is declared during render. You should move this declaration outside of render to ensure this component's state is persisted across re-renders of its parent. If this component is memoized, you should still refactor the component to be able to move it outside of render. If you want to reset its state use a key instead (see https://reactjs.org/docs/lists-and-keys.html#keys).
540|// Aggregate the average age of visitors541|aggregate: 'average',>542|Aggregated: ({ value })=>`${value} (avg)`,|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^543|},544|{545|Header: 'Visits',
Rule: react-hooks/no-nested-components
Message: Component "Aggregated" is declared during render. You should move this declaration outside of render to ensure this component's state is persisted across re-renders of its parent. If this component is memoized, you should still refactor the component to be able to move it outside of render. If you want to reset its state use a key instead (see https://reactjs.org/docs/lists-and-keys.html#keys).
549|// Aggregate the sum of all visits550|aggregate: 'sum',>551|Aggregated: ({ value })=>`${value} (total)`,|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^552|},553|{554|Header: 'Status',
Rule: react-hooks/no-nested-components
Message: Component "Aggregated" is declared during render. You should move this declaration outside of render to ensure this component's state is persisted across re-renders of its parent. If this component is memoized, you should still refactor the component to be able to move it outside of render. If you want to reset its state use a key instead (see https://reactjs.org/docs/lists-and-keys.html#keys).
564|// Use our custom roundedMedian aggregator565|aggregate: roundedMedian,>566|Aggregated: ({ value })=>`${value} (med)`,|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^567|},568|],569|},
Rule: react-hooks/no-nested-components
Message: Component "Header" is declared during render. You should move this declaration outside of render to ensure this component's state is persisted across re-renders of its parent. If this component is memoized, you should still refactor the component to be able to move it outside of render. If you want to reset its state use a key instead (see https://reactjs.org/docs/lists-and-keys.html#keys).
143|// rows in most cases. The client should only download data for the current page.144|// In that case, getToggleAllRowsSelectedProps works fine.>145|Header: ({ getToggleAllRowsSelectedProps })=>(|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^>146|<div>
| ^^^^^^^^^^^^^^^^^
>147|<IndeterminateCheckbox{...getToggleAllRowsSelectedProps()}/>
| ^^^^^^^^^^^^^^^^^
>148|</div>|^^^^^^^^^^^^^^^^^>149|),|^^^^^^^^^^^^150|// The cell can use the individual row's getToggleRowSelectedProps method151|// to the render a checkbox152|Cell: ({ row })=>(
Rule: react-hooks/no-nested-components
Message: Component "Cell" is declared during render. You should move this declaration outside of render to ensure this component's state is persisted across re-renders of its parent. If this component is memoized, you should still refactor the component to be able to move it outside of render. If you want to reset its state use a key instead (see https://reactjs.org/docs/lists-and-keys.html#keys).
150|// The cell can use the individual row's getToggleRowSelectedProps method151|// to the render a checkbox>152|Cell: ({ row })=>(|^^^^^^^^^^^^^^>153|<div>
| ^^^^^^^^^^^^^^^^^
>154|<IndeterminateCheckbox{...row.getToggleRowSelectedProps()}/>
| ^^^^^^^^^^^^^^^^^
>155|</div>|^^^^^^^^^^^^^^^^^>156|),|^^^^^^^^^^^^157|},158| ...columns,159|])
Rule: react-hooks/no-nested-components
Message: Component "Cell" is declared during render. You should move this declaration outside of render to ensure this component's state is persisted across re-renders of its parent. If this component is memoized, you should still refactor the component to be able to move it outside of render. If you want to reset its state use a key instead (see https://reactjs.org/docs/lists-and-keys.html#keys).
234|sortingFn: 'basic',235|aggregate: 'count',>236|Cell: ({ value })=>(value ? dayjs(value).format('l') : ''),|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^237|Aggregated: ({ value })=>`${value} Orders`,238|},239|{
Rule: react-hooks/no-nested-components
Message: Component "Aggregated" is declared during render. You should move this declaration outside of render to ensure this component's state is persisted across re-renders of its parent. If this component is memoized, you should still refactor the component to be able to move it outside of render. If you want to reset its state use a key instead (see https://reactjs.org/docs/lists-and-keys.html#keys).
235|aggregate: 'count',236|Cell: ({ value })=>(value ? dayjs(value).format('l') : ''),>237|Aggregated: ({ value })=>`${value} Orders`,|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^238|},239|{240|Header: 'Employee',
Rule: react-hooks/no-nested-components
Message: Component "Cell" is declared during render. You should move this declaration outside of render to ensure this component's state is persisted across re-renders of its parent. If this component is memoized, you should still refactor the component to be able to move it outside of render. If you want to reset its state use a key instead (see https://reactjs.org/docs/lists-and-keys.html#keys).
Message: Component "Cell" is declared during render. You should move this declaration outside of render to ensure this component's state is persisted across re-renders of its parent. If this component is memoized, you should still refactor the component to be able to move it outside of render. If you want to reset its state use a key instead (see https://reactjs.org/docs/lists-and-keys.html#keys).
Message: Component "Header" is declared during render. You should move this declaration outside of render to ensure this component's state is persisted across re-renders of its parent. If this component is memoized, you should still refactor the component to be able to move it outside of render. If you want to reset its state use a key instead (see https://reactjs.org/docs/lists-and-keys.html#keys).
117|{118|// Make an expander cell>119|Header: ()=>null,// No header|^^^^^^^^^^120|id: 'expander',// It needs an ID121|Cell: ({ row })=>(122|// Use Cell to render an expander for each row.
Rule: react-hooks/no-nested-components
Message: Component "Cell" is declared during render. You should move this declaration outside of render to ensure this component's state is persisted across re-renders of its parent. If this component is memoized, you should still refactor the component to be able to move it outside of render. If you want to reset its state use a key instead (see https://reactjs.org/docs/lists-and-keys.html#keys).
119|Header: ()=>null,// No header120|id: 'expander',// It needs an ID>121|Cell: ({ row })=>(|^^^^^^^^^^^^^^>122|// Use Cell to render an expander for each row.|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^>123|// We can use the getToggleRowExpandedProps prop-getter|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^>124|// to build the expander.|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^>125|<span{...row.getToggleRowExpandedProps()}>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
>126|{row.isExpanded ? '👇' : '👉'}
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
>127|</span>|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^>128|),|^^^^^^^^^^129|},130|{131|Header: 'Name',
Rule: react-hooks/no-nested-components
Message: Component "Header" is declared during render. You should move this declaration outside of render to ensure this component's state is persisted across re-renders of its parent. If this component is memoized, you should still refactor the component to be able to move it outside of render. If you want to reset its state use a key instead (see https://reactjs.org/docs/lists-and-keys.html#keys).
173|{174|// Make an expander cell>175|Header: ()=>null,// No header|^^^^^^^^^^176|id: 'expander',// It needs an ID177|Cell: ({ row })=>(178|// Use Cell to render an expander for each row.
Rule: react-hooks/no-nested-components
Message: Component "Cell" is declared during render. You should move this declaration outside of render to ensure this component's state is persisted across re-renders of its parent. If this component is memoized, you should still refactor the component to be able to move it outside of render. If you want to reset its state use a key instead (see https://reactjs.org/docs/lists-and-keys.html#keys).
175|Header: ()=>null,// No header176|id: 'expander',// It needs an ID>177|Cell: ({ row })=>(|^^^^^^^^^^^^^^>178|// Use Cell to render an expander for each row.|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^>179|// We can use the getToggleRowExpandedProps prop-getter|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^>180|// to build the expander.|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^>181|<span{...row.getToggleRowExpandedProps()}>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
>182|{row.isExpanded ? '👇' : '👉'}
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
>183|</span>|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^>184|),|^^^^^^^^^^185|// We can override the cell renderer with a SubCell to be used with an expanded row186|SubCell: ()=>null// No expander on an expanded row187|},
Rule: react-hooks/no-nested-components
Message: Component "SubCell" is declared during render. You should move this declaration outside of render to ensure this component's state is persisted across re-renders of its parent. If this component is memoized, you should still refactor the component to be able to move it outside of render. If you want to reset its state use a key instead (see https://reactjs.org/docs/lists-and-keys.html#keys).
184|),185|// We can override the cell renderer with a SubCell to be used with an expanded row>186|SubCell: ()=>null// No expander on an expanded row|^^^^^^^^^^187|},188|{189|Header: 'Name',
Rule: react-hooks/no-nested-components
Message: Component "SubCell" is declared during render. You should move this declaration outside of render to ensure this component's state is persisted across re-renders of its parent. If this component is memoized, you should still refactor the component to be able to move it outside of render. If you want to reset its state use a key instead (see https://reactjs.org/docs/lists-and-keys.html#keys).
194|accessor: (d)=>d.firstName,195|// We can render something different for subRows>196|SubCell: (cellProps)=>(|^^^^^^^^^^^^^^^^>197|<>🥳 {cellProps.value} 🎉</>|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^>198|)|^^^^^^^^^^^^^^199|},200|{201|Header: 'Last Name',
Rule: react-hooks/no-nested-components
Message: Component "Header" is declared during render. You should move this declaration outside of render to ensure this component's state is persisted across re-renders of its parent. If this component is memoized, you should still refactor the component to be able to move it outside of render. If you want to reset its state use a key instead (see https://reactjs.org/docs/lists-and-keys.html#keys).
Message: Component "Cell" is declared during render. You should move this declaration outside of render to ensure this component's state is persisted across re-renders of its parent. If this component is memoized, you should still refactor the component to be able to move it outside of render. If you want to reset its state use a key instead (see https://reactjs.org/docs/lists-and-keys.html#keys).
Message: Component "Cell" is declared during render. You should move this declaration outside of render to ensure this component's state is persisted across re-renders of its parent. If this component is memoized, you should still refactor the component to be able to move it outside of render. If you want to reset its state use a key instead (see https://reactjs.org/docs/lists-and-keys.html#keys).
85|Header: 'First Name',86|accessor: 'name',>87|Cell: ({row: { id }})=>`Row ${id}`,|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^88|},89|],90|[]
Rule: react-hooks/no-nested-components
Message: Component "Header" is declared during render. You should move this declaration outside of render to ensure this component's state is persisted across re-renders of its parent. If this component is memoized, you should still refactor the component to be able to move it outside of render. If you want to reset its state use a key instead (see https://reactjs.org/docs/lists-and-keys.html#keys).
137|// The header can use the table's getToggleAllRowsSelectedProps method138|// to render a checkbox>139|Header: ({ getToggleAllRowsSelectedProps })=>(|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^>140|<div>
| ^^^^^^^^^^^^^^^
>141|<label>
| ^^^^^^^^^^^^^^^
>142|<IndeterminateCheckbox{...getToggleAllRowsSelectedProps()}/>{' '}
| ^^^^^^^^^^^^^^^
>143|SelectAll|^^^^^^^^^^^^^^^>144|</label>
| ^^^^^^^^^^^^^^^
>145|</div>|^^^^^^^^^^^^^^^>146|),|^^^^^^^^^^147|// The cell can use the individual row's getToggleRowSelectedProps method148|// to the render a checkbox149|Cell: ({ row })=>(
Rule: react-hooks/no-nested-components
Message: Component "Cell" is declared during render. You should move this declaration outside of render to ensure this component's state is persisted across re-renders of its parent. If this component is memoized, you should still refactor the component to be able to move it outside of render. If you want to reset its state use a key instead (see https://reactjs.org/docs/lists-and-keys.html#keys).
147|// The cell can use the individual row's getToggleRowSelectedProps method148|// to the render a checkbox>149|Cell: ({ row })=>(|^^^^^^^^^^^^^^>150|<div>
| ^^^^^^^^^^^^^^^
>151|<label>
| ^^^^^^^^^^^^^^^
>152|<IndeterminateCheckbox{...row.getToggleRowSelectedProps()}/>{' '}
| ^^^^^^^^^^^^^^^
>153|SelectRow|^^^^^^^^^^^^^^^>154|</label>
| ^^^^^^^^^^^^^^^
>155|</div>|^^^^^^^^^^^^^^^>156|),|^^^^^^^^^^157|},158|{159|id: 'selectedStatus',
Rule: react-hooks/no-nested-components
Message: Component "Cell" is declared during render. You should move this declaration outside of render to ensure this component's state is persisted across re-renders of its parent. If this component is memoized, you should still refactor the component to be able to move it outside of render. If you want to reset its state use a key instead (see https://reactjs.org/docs/lists-and-keys.html#keys).
Message: Component "Aggregated" is declared during render. You should move this declaration outside of render to ensure this component's state is persisted across re-renders of its parent. If this component is memoized, you should still refactor the component to be able to move it outside of render. If you want to reset its state use a key instead (see https://reactjs.org/docs/lists-and-keys.html#keys).
156|accessor: 'firstName',157|aggregate: 'count',>158|Aggregated: ({ value })=>`First Name Aggregated: ${value} Names`,|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^159|},160|{161|Header: 'Last Name',
Rule: react-hooks/no-nested-components
Message: Component "Aggregated" is declared during render. You should move this declaration outside of render to ensure this component's state is persisted across re-renders of its parent. If this component is memoized, you should still refactor the component to be able to move it outside of render. If you want to reset its state use a key instead (see https://reactjs.org/docs/lists-and-keys.html#keys).
162|accessor: 'lastName',163|aggregate: 'uniqueCount',>164|Aggregated: ({ value })=>|^^^^^^^^^^^^^^>165|`Last Name Aggregated: ${value} Unique Names`,|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^166|},167|],168|},
Rule: react-hooks/no-nested-components
Message: Component "Aggregated" is declared during render. You should move this declaration outside of render to ensure this component's state is persisted across re-renders of its parent. If this component is memoized, you should still refactor the component to be able to move it outside of render. If you want to reset its state use a key instead (see https://reactjs.org/docs/lists-and-keys.html#keys).
174|accessor: 'age',175|aggregate: 'average',>176|Aggregated: ({ value })=>`Age Aggregated: ${value} (avg)`,|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^177|},178|{179|Header: 'Visits',
Rule: react-hooks/no-nested-components
Message: Component "Aggregated" is declared during render. You should move this declaration outside of render to ensure this component's state is persisted across re-renders of its parent. If this component is memoized, you should still refactor the component to be able to move it outside of render. If you want to reset its state use a key instead (see https://reactjs.org/docs/lists-and-keys.html#keys).
Message: Component "Aggregated" is declared during render. You should move this declaration outside of render to ensure this component's state is persisted across re-renders of its parent. If this component is memoized, you should still refactor the component to be able to move it outside of render. If you want to reset its state use a key instead (see https://reactjs.org/docs/lists-and-keys.html#keys).
Message: Component "Aggregated" is declared during render. You should move this declaration outside of render to ensure this component's state is persisted across re-renders of its parent. If this component is memoized, you should still refactor the component to be able to move it outside of render. If you want to reset its state use a key instead (see https://reactjs.org/docs/lists-and-keys.html#keys).
Message: Component "Aggregated" is declared during render. You should move this declaration outside of render to ensure this component's state is persisted across re-renders of its parent. If this component is memoized, you should still refactor the component to be able to move it outside of render. If you want to reset its state use a key instead (see https://reactjs.org/docs/lists-and-keys.html#keys).
201|accessor: 'visits',202|aggregate: 'minMax',>203|Aggregated: ({ value })=>`Visits Aggregated: ${value} (minMax)`,|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^204|},205|{206|Header: 'Status',
Rule: react-hooks/no-nested-components
Message: Component "Aggregated" is declared during render. You should move this declaration outside of render to ensure this component's state is persisted across re-renders of its parent. If this component is memoized, you should still refactor the component to be able to move it outside of render. If you want to reset its state use a key instead (see https://reactjs.org/docs/lists-and-keys.html#keys).
Message: Component "Aggregated" is declared during render. You should move this declaration outside of render to ensure this component's state is persisted across re-renders of its parent. If this component is memoized, you should still refactor the component to be able to move it outside of render. If you want to reset its state use a key instead (see https://reactjs.org/docs/lists-and-keys.html#keys).
Message: Component "Aggregated" is declared during render. You should move this declaration outside of render to ensure this component's state is persisted across re-renders of its parent. If this component is memoized, you should still refactor the component to be able to move it outside of render. If you want to reset its state use a key instead (see https://reactjs.org/docs/lists-and-keys.html#keys).
222|id: 'progressRounded',223|aggregate: roundedMedian,>224|Aggregated: ({ value })=>|^^^^^^^^^^^^^^>225|`Process Aggregated: ${value} (rounded median)`,|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^226|},227|],228|},
Rule: react-hooks/no-nested-components
Message: Component "Header" is declared during render. You should move this declaration outside of render to ensure this component's state is persisted across re-renders of its parent. If this component is memoized, you should still refactor the component to be able to move it outside of render. If you want to reset its state use a key instead (see https://reactjs.org/docs/lists-and-keys.html#keys).
85|// The header can use the table's getToggleAllRowsSelectedProps method86|// to render a checkbox>87|Header: ({table: { getToggleAllRowsSelectedProps }})=>(|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^>88|<div>
| ^^^^^^^^^^^^^^^^^^^
>89|<label>
| ^^^^^^^^^^^^^^^^^^^
>90|<IndeterminateCheckbox{...getToggleAllRowsSelectedProps()}/>{' '}
| ^^^^^^^^^^^^^^^^^^^
>91|SelectAll|^^^^^^^^^^^^^^^^^^^>92|</label>
| ^^^^^^^^^^^^^^^^^^^
>93|</div>|^^^^^^^^^^^^^^^^^^^>94|),|^^^^^^^^^^^^^^95|// The cell can use the individual row's getToggleRowSelectedProps method96|// to the render a checkbox97|Cell: ({ row })=>(
Rule: react-hooks/no-nested-components
Message: Component "Cell" is declared during render. You should move this declaration outside of render to ensure this component's state is persisted across re-renders of its parent. If this component is memoized, you should still refactor the component to be able to move it outside of render. If you want to reset its state use a key instead (see https://reactjs.org/docs/lists-and-keys.html#keys).
95|// The cell can use the individual row's getToggleRowSelectedProps method96|// to the render a checkbox>97|Cell: ({ row })=>(|^^^^^^^^^^^^^^>98|<div>
| ^^^^^^^^^^^^^^^^^^^
>99|<label>
| ^^^^^^^^^^^^^^^^^^^
>100|<IndeterminateCheckbox{...row.getToggleRowSelectedProps()}/>{' '}
| ^^^^^^^^^^^^^^^^^^^
>101|SelectRow|^^^^^^^^^^^^^^^^^^^>102|</label>
| ^^^^^^^^^^^^^^^^^^^
>103|</div>|^^^^^^^^^^^^^^^^^^^>104|),|^^^^^^^^^^^^^^105|},106| ...columns,107|])
Rule: react-hooks/no-nested-components
Message: Component "Cell" is declared during render. You should move this declaration outside of render to ensure this component's state is persisted across re-renders of its parent. If this component is memoized, you should still refactor the component to be able to move it outside of render. If you want to reset its state use a key instead (see https://reactjs.org/docs/lists-and-keys.html#keys).
