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 }) => ( -
- -
- ), - }, { id: 'selectedStatus', Cell: ({ row }) => (