Skip to main content

Override Tombol Aksi TableLowcode

Case 1​

Saya ingin tombol Edit hanya muncul apabila nilai action === 'DRAFT'

  1. pastikan di spec nilai can_edit nya tidak false
  2. buatlah fungsi baru contohnya
const customButtonEdit = (Modal: JSX.Element, ButtonAlurkerja: JSX.Element, row: any) => {
    if (row.action === 'DRAFT') {
      return ButtonAlurkerja
    }

    return <></>
  }

pada code berikut saya ingin tombol edit hanya muncul apabila row tersebut nilai actionnya 'DRAFT' 3. Kirimkan lewat Props

<TableLowcode
  ...props yang lain
  customButtonEdit={customButtonEdit}
/>

sebelum mengetahui kenapa fungsi2 argumen tersebut diteruskan dari komponent perlu diketahui dlu bagaimana kerjanya, by default tombol aksi pada TableLowcode itu menggunakan Modal namun, jika terdapat fungsi onClickCreate/onClickDetail/onClickEdit dsb maka modal tersebut akan berubah menjadi button biasa, oleh sebab itu props customButton itu mengembalikanModal dan Button. sedangkan row merupakan nilai dari baris tersebut

Case 2​

di spec BE can_edit true tpi diminta hide aja button edit nya, dan programmer yang diminta tidak bisa ngerjain BE nya dan klo menggunakan static spec boros LOC hanya untuk ganti can_edit false

  1. buat component reusable namanya Empty
  2. return React Frament
import React from 'react'

export const Empty = () => {
  return (
    <></>
  )
}
  1. gunakan komponent tersebut via props TableLowcode
<TableLowcode
  ...props yang lain
  customButtonEdit={Empty}
/>