add checkbox

This commit is contained in:
natib21
2026-06-20 14:19:02 +00:00
parent b28cf6ae91
commit db5e1568df
2 changed files with 58 additions and 2 deletions

View File

@@ -15,6 +15,7 @@ import {
Box,
Button,
Card,
Checkbox,
Divider,
Group,
Menu,
@@ -381,6 +382,7 @@ const FirstMilePage = () => {
const [jobs, setJobs] = useState<FirstMileJob[]>(PLACEHOLDER_JOBS);
const [search, setSearch] = useState("");
const [statusFilter, setStatusFilter] = useState<StatusFilter>("ALL");
const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
const [assignOpen, setAssignOpen] = useState(false);
const [detailOpen, setDetailOpen] = useState(false);
@@ -528,6 +530,29 @@ const FirstMilePage = () => {
const headerClassName = ruleEngineTable.headerCell;
const cellClassName = ruleEngineTable.bodyCell;
return [
{
id: "select",
size: 40,
meta: { headerClassName, cellClassName },
header: ({ table }) => (
<Checkbox
aria-label="Select all"
checked={table.getIsAllPageRowsSelected()}
indeterminate={
table.getIsSomePageRowsSelected() && !table.getIsAllPageRowsSelected()
}
onChange={(e) => table.toggleAllPageRowsSelected(e.currentTarget.checked)}
/>
),
cell: ({ row }) => (
<Checkbox
aria-label="Select row"
checked={row.getIsSelected()}
disabled={!row.getCanSelect()}
onChange={row.getToggleSelectedHandler()}
/>
),
},
{
id: "bookingRef",
header: "Booking",
@@ -725,8 +750,11 @@ const FirstMilePage = () => {
tableOptions={{
manualPagination: true,
pageCount,
state: { pagination },
enableRowSelection: true,
getRowId: (row) => row.id,
state: { pagination, rowSelection },
onPaginationChange: setPagination,
onRowSelectionChange: setRowSelection,
}}
containerClassName="border-0 shadow-none bg-transparent"
footer={({ table, pagination: footerPagination }) => (

View File

@@ -15,6 +15,7 @@ import {
Box,
Button,
Card,
Checkbox,
Divider,
Group,
Menu,
@@ -381,6 +382,7 @@ const LastMilePage = () => {
const [jobs, setJobs] = useState<LastMileJob[]>(PLACEHOLDER_JOBS);
const [search, setSearch] = useState("");
const [statusFilter, setStatusFilter] = useState<StatusFilter>("ALL");
const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
const [assignOpen, setAssignOpen] = useState(false);
const [detailOpen, setDetailOpen] = useState(false);
@@ -528,6 +530,29 @@ const LastMilePage = () => {
const headerClassName = ruleEngineTable.headerCell;
const cellClassName = ruleEngineTable.bodyCell;
return [
{
id: "select",
size: 40,
meta: { headerClassName, cellClassName },
header: ({ table }) => (
<Checkbox
aria-label="Select all"
checked={table.getIsAllPageRowsSelected()}
indeterminate={
table.getIsSomePageRowsSelected() && !table.getIsAllPageRowsSelected()
}
onChange={(e) => table.toggleAllPageRowsSelected(e.currentTarget.checked)}
/>
),
cell: ({ row }) => (
<Checkbox
aria-label="Select row"
checked={row.getIsSelected()}
disabled={!row.getCanSelect()}
onChange={row.getToggleSelectedHandler()}
/>
),
},
{
id: "bookingRef",
header: "Booking",
@@ -725,8 +750,11 @@ const LastMilePage = () => {
tableOptions={{
manualPagination: true,
pageCount,
state: { pagination },
enableRowSelection: true,
getRowId: (row) => row.id,
state: { pagination, rowSelection },
onPaginationChange: setPagination,
onRowSelectionChange: setRowSelection,
}}
containerClassName="border-0 shadow-none bg-transparent"
footer={({ table, pagination: footerPagination }) => (