Alurkerja v1.0.0@Beta

TableLowcode

komponen ini digunakan untuk menampilkan list data dan sudah include CRUD apabila API dan spesifikasi nya sudah tersedia benar. default fitur CRUD nya menggunakan Modal. yang perlu ditekankan pada komponen ini adalah fitur default yang disediakan customisasinya terbatas. contoh ingin mengcustom tampilan modal default nya itu hanya ada opsi menggantikan bukan mengedit

Base

ini contoh sederhana penggunaan TableLowcode

Mengambil data..
Typescript
import { TableLowcode } from 'alurkerja-ui'
export const TableLowcodePage = () => {
	return(
		<TableLowcode
		  baseUrl='https://alurkerja-ui-bot.vercel.app'
		  specPath='/api/data'
		/>
	)
}

Feature

Pagination

Mengambil data..
Typescript
import { TableLowcode } from 'alurkerja-ui'
import { useState } from 'react'

export const TableLowcodePage = () => {
	const [pageConfig, setPageConfig] = useState({ limit: 10, page: 0 })

	return(
		<TableLowcode
		  baseUrl='https://alurkerja-ui-bot.vercel.app'
		  specPath='/api/data'
		  pageConfig={pageConfig}
		  setPageConfig={setPageConfig}
		/>
	)
}

Search

untuk mengashilkan table yang memiliki fitur search perlu mengirimkan state beserta setState nya yaitu search dan setSearch

Mengambil data..
Typescript
import { TableLowcode } from 'alurkerja-ui'
export const TableLowcodePage = () => {
	const [search, setSearch] = useState<string>()

	return(
		<TableLowcode
		  baseUrl='https://alurkerja-ui-bot.vercel.app'
		  specPath='/api/data'
		  search={search}
		  setSearch={setSearch}
		/>
	)
}

Filter

Mengambil data..
Typescript
import { TableLowcode } from 'alurkerja-ui'
import { useState } from 'react'

export const TableLowcodePage = () => {
	const [filterBy, setFilterBy] = useState<{ [x: string]: any } | undefined>()

	return(
		<TableLowcode
		  baseUrl='https://alurkerja-ui-bot.vercel.app'
		  specPath='/api/data'
		  filterBy={filterBy}
		  setFilterBy={setFilterBy}
		/>
	)
}

Bulk

ini contoh fitur bulk

selected: []
Mengambil data..
Typescript
import { TableLowcode } from 'alurkerja-ui'
export const TableLowcodePage = () => {
	const [selected, setSelected] = useState<number[]>([])

	return(
		<TableLowcode
		  baseUrl='https://alurkerja-ui-bot.vercel.app'
		  specPath='/api/data'
		  canBulk
		  selectedRow={selected}
		  setSelectedRow={setSelected}
		/>
	)
}

All Base Feauture in one

ini contoh apabila ingin menggukan semua fitur default TableLowcode

Mengambil data..
Typescript
import { TableLowcode } from 'alurkerja-ui'
import { useState } from react

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

	return(
		<TableLowcode
		  baseUrl='https://alurkerja-ui-bot.vercel.app'
		  specPath='/api/data'
		  renderState={renderState}
		  setRenderState={setRenderState}
		  pageConfig={pageConfig}
		  setPageConfig={setPageConfig}
		  filterBy={filterBy}
		  setFilterBy={setFilterBy}
		  search={search}
		  setSearch={setSearch}
		  canBulk
		  selectedRow={selected}
		  setSelectedRow={setSelected}
		  onClickCreate={onClickCreate}
		/>
	)
}

Props

title()

ini contoh menambahkan title di table

Ini Judul
Mengambil data..
Typescript
import { TableLowcode } from 'alurkerja-ui'
export const TableLowcodePage = () => {
	return(
		<TableLowcode
		  baseUrl='https://alurkerja-ui-bot.vercel.app'
		  specPath='/api/data'
		  title="Ini Judul"
		/>
	)
}

bordered()

ini contoh jika ingin tablenya memiliki border

Mengambil data..
Typescript
import { TableLowcode } from 'alurkerja-ui'
export const TableLowcodePage = () => {
	return(
		<TableLowcode
		  baseUrl='https://alurkerja-ui-bot.vercel.app'
		  specPath='/api/data'
		  bordered
		/>
	)
}

onClickCreate()

Mengambil data..
Typescript
import { TableLowcode } from 'alurkerja-ui'
export const TableLowcodePage = () => {
	const onClickCreate = () => {
	  return alert('create clicked')
	}

	return(
		<TableLowcode
		  baseUrl='https://alurkerja-ui-bot.vercel.app'
		  specPath='/api/data'
		  onClickCreate={onClickCreate}
		/>
	)
}

onClickDetail()

Mengambil data..
Typescript
import { TableLowcode } from 'alurkerja-ui'
export const TableLowcodePage = () => {
	const onClickDetail = (id: number, row: any) => {
	  return alert('click detail')
	}

	return(
		<TableLowcode
		  baseUrl='https://alurkerja-ui-bot.vercel.app'
		  specPath='/api/data'
		  onClickDetail={onClickDetail}
		/>
	)
}

onClickEdit()

ini contoh apabila ingin mengganti fungsi edit contohnya saya ingin tombol edit ketika di klik pindah halaman

Mengambil data..
Typescript
import { TableLowcode } from 'alurkerja-ui'
export const TableLowcodePage = () => {
	const onClickEdit = (fieldSpec: FieldActionProperties, id: number | string, row: any) => {
	  return alert('edit clicked')
	}

	return(
		<TableLowcode
		  baseUrl='https://alurkerja-ui-bot.vercel.app'
		  specPath='/api/data'
		  onClickEdit={onClickEdit}
		/>
	)
}

onClickFilter()

Mengambil data..
Typescript
import { TableLowcode } from 'alurkerja-ui'
import { useState } from 'react'

export const TableLowcodePage = () => {
	const [showFilter, setShowFilter] = useState(false)
	
	const subHeader = () => {
	  if(!showFilter){
	    return <></>
	  }
	  return <>Filter di subhead</>
	}
	
	const onClickFilter = () => {
	  setShowFilter((prev) => !prev)
	}

	return(
		<TableLowcode
		  baseUrl='https://alurkerja-ui-bot.vercel.app'
		  specPath='/api/data'
		  onClickEdit={onClickEdit}
		/>
	)
}

customButtonDetail()

Mengambil data..
Typescript
import { TableLowcode } from 'alurkerja-ui'
export const TableLowcodePage = () => {
	 const customButtonDetail = (Modal: any, Button: any, data: any) => {
	  return <div>ini id {data.id}</div>
	}

	return(
		<TableLowcode
		  baseUrl='https://alurkerja-ui-bot.vercel.app'
		  specPath='/api/data'
		  customButtonDetail={customButtonCreate}
		/>
	)
}

customButtonEdit()

Mengambil data..
Typescript
import { TableLowcode } from 'alurkerja-ui'
export const TableLowcodePage = () => {
	 const customButtonEdit = (Modal: any, Button: any, data: any) => {
	  return <div>ini id {data.id}</div>
	}

	return(
		<TableLowcode
		  baseUrl='https://alurkerja-ui-bot.vercel.app'
		  specPath='/api/data'
		  customButtonEdit={customButtonEdit}
		/>
	)
}

customButtonFilter()

filter nya tidak sesuai dengan kebutuhan user? custom saja pakai props ini

Mengambil data..
Typescript
import { TableLowcode } from 'alurkerja-ui'
export const TableLowcodePage = () => {
	const customButtonFilter = ( _Modal: () => JSX.Element,Button: (props: ButtonHTMLAttributes<HTMLButtonElement>) => JSX.Element) => {
	  return <Button onClick={() => alert('filter clicked')} />
	}

	return(
		<TableLowcode
		  baseUrl='https://alurkerja-ui-bot.vercel.app'
		  specPath='/api/data'
		  customButtonFilter={customButtonFilter}
		/>
	)
}

customButtonCreate()

mau nya custom aja
Mengambil data..
Typescript
import { TableLowcode } from 'alurkerja-ui'
import { useState } from react

export const TableLowcodePage = () => {
	 const customButtonCreate = (Modal: any, Button: any, data: any) => {
	  return <div>mau nya custom aja</div>
	}

	return(
		<TableLowcode
		  baseUrl='https://alurkerja-ui-bot.vercel.app'
		  specPath='/api/data'
		  customButtonCreate={customButtonCreate}
		/>
	)
}

customCell()

Mengambil data..
Typescript
import { TableLowcode, CustomCellProperties} from 'alurkerja-ui'
export const TableLowcodePage = () => {
	const customCell = (arg: CustomCellProperties) => {
	  const { defaultCell, name, value } = arg
	
	  if (name === 'nama_aktiviti') {
	    return <div className="bg-yellow-900 rounded p-1 text-white">ini custom {value}</div>
	  }
	  return defaultCell
	}

	return(
		<TableLowcode
		  baseUrl='https://alurkerja-ui-bot.vercel.app'
		  specPath='/api/data'
		  customCell={customCell}
		/>
	)
}

customRow()

Mengambil data..
Typescript
import { TableLowcode } from 'alurkerja-ui'
export const TableLowcodePage = () => {
	const customRow = ({ row, DefaultElement }: CustomRowProperties) => {{
	  if (row.id % 2 !== 0) {
	    const CustomElement = cloneElement(DefaultElement, {
	      className: 'border-b border-gray-200 bg-red-50',
	      classNameColAction: 'bg-red-50 border-b border-gray-200 py-3 px-4'
	    })
	
	    return CustomElement
	  }
	  return DefaultElement

	return(
		<TableLowcode
		  baseUrl='https://alurkerja-ui-bot.vercel.app'
		  specPath='/api/data'
		  customRow={customRow}
		/>
	)
}

customHeader()

Ini Header Custom
Mengambil data..
Typescript
import { TableLowcode } from 'alurkerja-ui'
export const TableLowcodePage = () => {
	 const customHeader = () => {
	  return <div>Ini Header Custom</div>
	}

	return(
		<TableLowcode
		  baseUrl='https://alurkerja-ui-bot.vercel.app'
		  specPath='/api/data'
		  customHeader={customHeader}
		/>
	)
}

customActionCell()

props ini digunakan untuk mengcustom aksi atau action cell secara keseluruhan

Mengambil data..
Typescript
import { TableLowcode, Button} from 'alurkerja-ui'
import { useState } from react

export const TableLowcodePage = () => {
	const [pageConfig, setPageConfig] = useState({ limit: 10, page: 0 })
	const [renderState, setRenderState] = useState(0)
	const [filterBy, setFilterBy] = useState<{ [x: string]: any } | undefined>()
	const [search, setSearch] = useState<string>()
	
	const customActionCell = (data: any) => {
	  return <Button variant="filled">{data.id}</Button>
	}

	return(
		<TableLowcode
		  baseUrl='https://alurkerja-ui-bot.vercel.app'
		  specPath='/api/data'
		  renderState={renderState}
		  setRenderState={setRenderState}
		  pageConfig={pageConfig}
		  setPageConfig={setPageConfig}
		  filterBy={filterBy}
		  setFilterBy={setFilterBy}
		  search={search}
		  setSearch={setSearch}
		  customActionCell={customActionCell}
		/>
	)
}

extraActionButton()

Mengambil data..
Typescript
import { TableLowcode } from 'alurkerja-ui'
export const TableLowcodePage = () => {
	const extraActionButton =(data?: {[x:string]:any}) => {
	  return <>Export PDF</>
	}

	return(
		<TableLowcode
		  baseUrl='https://alurkerja-ui-bot.vercel.app'
		  specPath='/api/data'
		  extraActionButton={extraActionButton}
		/>
	)
}

extraRow()

Mengambil data..
Typescript
import { TableLowcode } from 'alurkerja-ui'
export const TableLowcodePage = () => {
	const extraRow = (data?: { [x: string]: any }) => {
	  return (
	    <tr>
	      <td colSpan={7}>
	        <div className="flex items-center justify-between"
	          <div>total Data :</div>
	          <div>{data?.length}</div>
	        </div
	      </td>
	    </tr>
	  )
	}

	return(
		<TableLowcode
		  baseUrl='https://alurkerja-ui-bot.vercel.app'
		  specPath='/api/data'
		  extraRow={extraRow}
		/>
	)
}

extraRowTableHead()

Mengambil data..
Typescript
import { TableLowcode } from 'alurkerja-ui'
export const TableLowcodePage = () => {
	const extraRowTableHead = () => {
	  return (
	    <tr>
	      <th
	        className="whitespace-nowrap py-3 px-3 capitalize relative cursor-pointer border-r w-10 align-middle"
	        rowSpan={2}
	      >
	        No
	      </th>
	      <th className="whitespace-nowrap py-3 px-3 capitalize relative cursor-pointer border-b text-center" colSpan={7}>
	        A
	      </th>
	    </tr>
	  )
	}

	return(
		<TableLowcode
		  baseUrl='https://alurkerja-ui-bot.vercel.app'
		  specPath='/api/data'
		  extraRowTableHead={extraRowTableHead}
		/>
	)
}

column()

Mengambil data..
Typescript
import { TableLowcode } from 'alurkerja-ui'
export const TableLowcodePage = () => {
	return(
		<TableLowcode
		  baseUrl='https://alurkerja-ui-bot.vercel.app'
		  specPath='/api/data'
		  column={[{ key: 'name', label: 'Halo' }]}
		/>
	)
}

subHeader()

ini sub header
Mengambil data..
Typescript
import { TableLowcode } from 'alurkerja-ui'
export const TableLowcodePage = () => {
	const subHeader = () => {
	  return <>ini sub header</>
	}

	return(
		<TableLowcode
		  baseUrl='https://alurkerja-ui-bot.vercel.app'
		  specPath='/api/data'
		  subHeader={subHeader}
		/>
	)
}

tooltips()

Mengambil data..
Typescript
import { TableLowcode } from 'alurkerja-ui'
export const TableLowcodePage = () => {
	return(
		<TableLowcode
		  baseUrl='https://alurkerja-ui-bot.vercel.app'
		  specPath='/api/data'
		  tooltip={{ button_create: 'a', button_delete: 'b', button_detail: 'c', button_edit: 'd' }}
		/>
	)
}

searchPlaceholder()

memberikan placeholer pada field search di table

Mengambil data..
Typescript
import { TableLowcode } from 'alurkerja-ui'
export const TableLowcodePage = () => {
	const [search, setSearch] = useState<string>()

	return(
		<TableLowcode
		  baseUrl='https://alurkerja-ui-bot.vercel.app'
		  specPath='/api/data'
		  search={search}
		  setSearch={setSearch}
		  searchPlaceholder="Ini placeholder"
		/>
	)
}