Overide / Customize

Customize kebanyakan via spec yang diberikan oleh BE, contohnya menghide button aksi (Create, Delete, Update, Detail), menghide column, menghide field, dsb. namun tidak semuanya bisa via spec karena itu disediakan attribute untuk mengcustom via FE.

TableLowcode

Mengganti /crud

library secara otomatis menambahkan api/crud dari baseUrl yang dikirimkan melalui komponen TableLowcode / AlurkerjaForm. untuk overide nya tambahkan attribute module berisikan kata pengganti crud contohnya

import { TableLowcode } from 'alurkerja-ui'
import { useState } from 'react'

const Halaman = () => {
  const [pageConfig, setPageConfig] = useState({ limit: 10, page: 0 })
  const [renderState, setRenderState] = useState(0)
  const [filterBy, setFilterBy] = useState<{ [x: string]: any }>()
  const [search, setSearch] = useState<string>()

  return (
    <TableLowcode
      baseUrl="https://api-geekacademy.merapi.javan.id"
      tableName="cuti"
      moudle='bpmn'
      renderState={renderState}
      setRenderState={setRenderState}
      pageConfig={pageConfig}
      setPageConfig={setPageConfig}
      filterBy={filterBy}
      setFilterBy={setFilterBy}
      search={search}
      setSearch={setSearch}
    />
  )
}

Mengganti Judul Table

Library secara default akan menggunakan attribute tableName untuk ditampilan sebagai judul table. untuk mengoveride nya gunakan attribute title pada TableLowcode berikut contohnya :

import { TableLowcode } from 'alurkerja-ui'
import { useState } from 'react'

const Halaman = () => {
  const [pageConfig, setPageConfig] = useState({ limit: 10, page: 0 })
  const [renderState, setRenderState] = useState(0)
  const [filterBy, setFilterBy] = useState<{ [x: string]: any }>()
  const [search, setSearch] = useState<string>()

  return (
    <TableLowcode
      title="Table Cuti"
      baseUrl="https://api-geekacademy.merapi.javan.id"
      tableName="cuti"
      moudle='bpmn'
      renderState={renderState}
      setRenderState={setRenderState}
      pageConfig={pageConfig}
      setPageConfig={setPageConfig}
      filterBy={filterBy}
      setFilterBy={setFilterBy}
      search={search}
      setSearch={setSearch}
    />
  )
}

Mengganti Header Table

TableLowcode memiliki tableHeader nya sendiri, namun jika requirement nya berbeda header tersebut dapat di gantikan dengan menggunakan attribute customHeader

import { TableLowcode } from 'alurkerja-ui'
import { useState } from 'react'

const Halaman = () => {
  const [pageConfig, setPageConfig] = useState({ limit: 10, page: 0 })
  const [renderState, setRenderState] = useState(0)
  const [filterBy, setFilterBy] = useState<{ [x: string]: any }>()
  const [search, setSearch] = useState<string>()

  return (
    <TableLowcode
      baseUrl="https://api-geekacademy.merapi.javan.id"
      tableName="cuti"
      moudle='bpmn'
      renderState={renderState}
      setRenderState={setRenderState}
      pageConfig={pageConfig}
      setPageConfig={setPageConfig}
      filterBy={filterBy}
      setFilterBy={setFilterBy}
      search={search}
      setSearch={setSearch}
      customHeader={<div>Header</div>}
    />
  )
}

Mengganti Fungsi Create/Edit/Detail/Hapus

By default fitur CRUD yanag digenerate oleh library menggunakan modal. apabila ingin mengganti nya dengan pindah halaman dapat menggunakan onClick[aksi]. contohnya :

1. Pindah halaman ketika klik Create pada project React

import { TableLowcode } from 'alurkerja-ui'
import { useState } from 'react'
import { useNavigate } from "react-router-dom";

const Halaman = () => {
  const navigate = useNavigate();

  const [pageConfig, setPageConfig] = useState({ limit: 10, page: 0 })
  const [renderState, setRenderState] = useState(0)
  const [filterBy, setFilterBy] = useState<{ [x: string]: any }>()
  const [search, setSearch] = useState<string>()

  return (
    <TableLowcode
      baseUrl="https://api-geekacademy.merapi.javan.id"
      tableName="cuti"
      moudle='bpmn'
      renderState={renderState}
      setRenderState={setRenderState}
      pageConfig={pageConfig}
      setPageConfig={setPageConfig}
      filterBy={filterBy}
      setFilterBy={setFilterBy}
      search={search}
      setSearch={setSearch}
      onClickCreate={() => navigate('create')}
    />
  )
}

2. Pindah halaman ketika klik Edit pada project React Ada sedikit perbedaan di fungsing onClick[aksi] yang mana pada edit/detail/delete akan mengirimkan beberapa variabel seperti id atau spec. detail nya bisa dilihat di TableLowcode di menu tableLowcode dan di file docs cari di bagian Props

import { TableLowcode } from 'alurkerja-ui'
import { useState } from 'react'
import { useNavigate } from "react-router-dom";

const Halaman = () => {
  const navigate = useNavigate();

  const [pageConfig, setPageConfig] = useState({ limit: 10, page: 0 })
  const [renderState, setRenderState] = useState(0)
  const [filterBy, setFilterBy] = useState<{ [x: string]: any }>()
  const [search, setSearch] = useState<string>()

  return (
    <TableLowcode
      baseUrl="https://api-geekacademy.merapi.javan.id"
      tableName="cuti"
      moudle='bpmn'
      renderState={renderState}
      setRenderState={setRenderState}
      pageConfig={pageConfig}
      setPageConfig={setPageConfig}
      filterBy={filterBy}
      setFilterBy={setFilterBy}
      search={search}
      setSearch={setSearch}
      onCLickDetail={(id) => navigate('detail/' + id)}
    />
  )
}

FormLowcode