diff --git a/examples/kitchen-sink-controlled/src/App.js b/examples/kitchen-sink-controlled/src/App.js
index fc5ce68..105e874 100644
--- a/examples/kitchen-sink-controlled/src/App.js
+++ b/examples/kitchen-sink-controlled/src/App.js
@@ -306,7 +306,32 @@ function Table({ columns, data, updateMyData, skipPageReset }) {
useSortBy,
useExpanded,
usePagination,
- useRowSelect
+ useRowSelect,
+ hooks => {
+ hooks.flatColumns.push(columns => [
+ {
+ id: 'selection',
+ // Make this column a groupByBoundary. This ensures that groupBy columns
+ // are placed after it
+ groupByBoundary: true,
+ // The header can use the table's getToggleAllRowsSelectedProps method
+ // to render a checkbox
+ Header: ({ getToggleAllRowsSelectedProps }) => (
+
+
+
+ ),
+ // The cell can use the individual row's getToggleRowSelectedProps method
+ // to the render a checkbox
+ Cell: ({ row }) => (
+
+
+
+ ),
+ },
+ ...columns,
+ ])
+ }
)
// Render the UI for your table
@@ -478,26 +503,6 @@ function roundedMedian(values) {
function App() {
const columns = React.useMemo(
() => [
- {
- id: 'selection',
- // Make this column a groupByBoundary. This ensures that groupBy columns
- // are placed after it
- groupByBoundary: true,
- // The header can use the table's getToggleAllRowsSelectedProps method
- // to render a checkbox
- Header: ({ getToggleAllRowsSelectedProps }) => (
-
-
-
- ),
- // The cell can use the individual row's getToggleRowSelectedProps method
- // to the render a checkbox
- Cell: ({ row }) => (
-
-
-
- ),
- },
{
Header: 'Name',
columns: [
diff --git a/examples/row-selection/src/App.js b/examples/row-selection/src/App.js
index d681ed1..66d5f10 100644
--- a/examples/row-selection/src/App.js
+++ b/examples/row-selection/src/App.js
@@ -65,7 +65,30 @@ function Table({ columns, data }) {
columns,
data,
},
- useRowSelect
+ useRowSelect,
+ hooks => {
+ hooks.flatColumns.push(columns => [
+ // Let's make a column for selection
+ {
+ id: 'selection',
+ // The header can use the table's getToggleAllRowsSelectedProps method
+ // to render a checkbox
+ Header: ({ getToggleAllRowsSelectedProps }) => (
+
+
+
+ ),
+ // The cell can use the individual row's getToggleRowSelectedProps method
+ // to the render a checkbox
+ Cell: ({ row }) => (
+
+
+
+ ),
+ },
+ ...columns,
+ ])
+ }
)
// Render the UI for your table
@@ -116,24 +139,6 @@ function Table({ columns, data }) {
function App() {
const columns = React.useMemo(
() => [
- // Let's make a column for selection
- {
- id: 'selection',
- // The header can use the table's getToggleAllRowsSelectedProps method
- // to render a checkbox
- Header: ({ getToggleAllRowsSelectedProps }) => (
-
-
-
- ),
- // The cell can use the individual row's getToggleRowSelectedProps method
- // to the render a checkbox
- Cell: ({ row }) => (
-
-
-
- ),
- },
{
Header: 'Name',
columns: [
diff --git a/src/plugin-hooks/tests/useRowSelect.test.js b/src/plugin-hooks/tests/useRowSelect.test.js
index 702d6a8..a4ca8ac 100644
--- a/src/plugin-hooks/tests/useRowSelect.test.js
+++ b/src/plugin-hooks/tests/useRowSelect.test.js
@@ -82,7 +82,36 @@ function Table({ columns, data }) {
data,
},
useRowSelect,
- useExpanded
+ useExpanded,
+ hooks => {
+ hooks.flatColumns.push(columns => [
+ // Let's make a column for selection
+ {
+ id: 'selection',
+ // The header can use the table's getToggleAllRowsSelectedProps method
+ // to render a checkbox
+ Header: ({ getToggleAllRowsSelectedProps }) => (
+
+
+
+ ),
+ // The cell can use the individual row's getToggleRowSelectedProps method
+ // to the render a checkbox
+ Cell: ({ row }) => (
+
+
+
+ ),
+ },
+ ...columns,
+ ])
+ }
)
// Render the UI for your table
@@ -139,30 +168,6 @@ const IndeterminateCheckbox = React.forwardRef(
function App() {
const columns = React.useMemo(
() => [
- // Let's make a column for selection
- {
- id: 'selection',
- // The header can use the table's getToggleAllRowsSelectedProps method
- // to render a checkbox
- Header: ({ getToggleAllRowsSelectedProps }) => (
-
-
-
- ),
- // The cell can use the individual row's getToggleRowSelectedProps method
- // to the render a checkbox
- Cell: ({ row }) => (
-