dependent-tan•12mo ago

Hi guys. I'm using refine to create the

Hi guys. I'm using refine to create the crud page. I'm using supabase as DB I was implemented the list.tsx to show my record on a specific table and using ShowButton to navigate to the item itself. Now I want to remove showButton and click a row to display the page show item with the id of that row. I have found the prop onRow of table to set onClick to each row, but how can I get the event of the ShowButton? Did anyone implemented that before sorry for my bad English, I will try to improve it in the future 😄 Thank guys, I resolved this 😄 refine is gooddd

5 Replies

rare-sapphire•12mo ago

Would you mind sharing what you did to change this behavior. I would also like to implement this for my app.

kapa.ai•12mo ago

Hi @silentnyte. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: Sorry @silentnyte, I seem to be having a bit of trouble. Don't worry though, I've pinged my supprt and they will try to fix me up! :technologist: Perhaps try again in 15mins?

rare-sapphire•12mo ago

@tandeptraiso1 would you mind sharing how you changed the row behavior?

adverse-sapphire•12mo ago

sorry for late reply First, you have to know how the ShowButton work. In the refine doc, ShowButton will use method show() from useNavigation under the hood to get the data from DB. I'm using the onRow of table to bind the onClick to each row, then I use show("dataTable", recordId) to show the record here is the code

onRow={(record) => ({
  onClick: (event: any) => {
    if (record.id) {
      show("lot", record.id);
    }
  },
})}

onRow={(record) => ({
  onClick: (event: any) => {
    if (record.id) {
      show("lot", record.id);
    }
  },
})}

rare-sapphire•12mo ago

The above example does not work with Chakra, onRow is not exposed for Table. This is how I got it working.

    const navigation = useNavigation();
    function handleRowClick(id: string) {
        navigation.show("recipe", id);
    }

<Tr key={row.id} onClick={() => handleRowClick(row.original.id)} >

    const navigation = useNavigation();
    function handleRowClick(id: string) {
        navigation.show("recipe", id);
    }

<Tr key={row.id} onClick={() => handleRowClick(row.original.id)} >