CODEWITHSUNDEEP
reactjsreact-table
Jitender
Jitender

Reputation: 7969

get access to selected row data from outside table component

I have a common component for the table which is being used in different pages through the app. Now the selection of rows is being saved inside the table component itself. I want to access the selected rows of data from its parent component whenever button pressed

Here is an example https://codesandbox.io/s/naughty-pond-3e5jp

Upvotes: 0

Views: 4622

Answers (4)

talipini talipini
talipini talipini

Reputation: 183

Connect the parent component with the Table with useEffects. A pseudo example below.

function TableComponent ({columns, data.., setSelectedRows}){

  const { ..., selectedFlatRows, state:{selectedRowIds} } = useTable({..})

  useEffect(() =>{
      setSelectedRows(selectedFlatRows)
  }, [selectedFlatRows])

  ......

}

function ParentComponent (props){
  const [selectedRows, setSelectedRows = useState ([])

  useEffect(() =>{
    // do your custom handle of the selection
  },[selectedTickers])

 return (
    ......
    <Table  
      columns={columns} 
      ....
      setSelectedRows={setSelectedTickers}>
    </Table>
    ......
 )

}

Upvotes: -1

shahriyar baig
shahriyar baig

Reputation: 11

@jiltender 

    i fix my problem by doing this to get row data outside the table 
    
        rowProps={row =>(console.log(row)
                )} 
        

add this on parent components where u call the Table 
     <Table
            sortByProps={[]}
            columns={columns}
            rowProps={row =>(setSelectedItems(row))}  /// pass row props
           
          />
    
and the table side 
add this in 
function props 
` `rowProps = () => ({}) }) 

    function Table({ columns, data, showSpinnerProp, hiddenColumnsProps,getCellProps, getRowProps, height, sortByProps, source, 

    setSelectedItems,rowProps = () => ({}) }) {
        
        this will return u all the select data  you can call it before return 
        useEffect(() => {
            setSelectedItems = selectedFlatRows;
            rowProps(selectedFlatRows)
          }, [selectedFlatRows]);
        
        }

Upvotes: 1

rzwnahmd
rzwnahmd

Reputation: 1082

What you can do is pass maintain some state for selectedRows in you parent component then pass a callback to Table component that'll be called every time a row is selected or unselected. Here I have made some changes to your sandbox, hope it helps :)

https://codesandbox.io/s/naughty-sun-3nhue?file=/src/App.js

Upvotes: 2

PurpSchurp
PurpSchurp

Reputation: 625

Create a state variable outside of the component, something like

const [selectedRows, setSelectedRows] = useState([]);

And then pass this down to the component through the props. then on the button you can have some code like this

onPress = { () => props.setSelectedRows(selectedRows) }

Upvotes: 0

Related Questions