4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T3b43,@@directive("'use client'") type payment = {id: string, amount: float, status: string, email: string} let tableData: array = [ {id: "m5gr84i9", amount: 316., status: "success", email: "ken99@example.com"}, {id: "3u1reuv4", amount: 242., status: "success", email: "Abe45@example.com"}, {id: "derv1ws0", amount: 837., status: "processing", email: "Monserrat44@example.com"}, {id: "5kma53ae", amount: 874., status: "success", email: "Silas22@example.com"}, {id: "bhqecj4p", amount: 721., status: "failed", email: "carmella@example.com"}, ] module RT = { type t<'data> type col type row<'data> type cell type hdr type hdrGroup type rowModel<'data> = {rows: array>} type feature type filterFn type sortFn type features type rowModelGetter type colDef_ type colFilter = {id: string, value: string} type colFilters = array type colVisibility = dict type rowSel = dict type sortItem = {id: string, desc: bool} type sorting = array type hdrCtx<'data> type cellCtx<'data> type colDef<'data> = { id?: string, accessorKey?: string, header?: hdrCtx<'data> => React.element, cell?: cellCtx<'data> => React.element, enableSorting?: bool, enableHiding?: bool, } type state = { sorting: sorting, columnFilters: colFilters, columnVisibility: colVisibility, rowSelection: rowSel, } type options<'data> = { data: array<'data>, columns: array>, features: features, onSortingChange: (sorting => sorting) => unit, onColumnFiltersChange: (colFilters => colFilters) => unit, onColumnVisibilityChange: (colVisibility => colVisibility) => unit, onRowSelectionChange: (rowSel => rowSel) => unit, state: state, } @module("@tanstack/react-table") external flexRender: ('a, 'b) => React.element = "flexRender" type featuresOptions = { columnFilteringFeature: feature, columnVisibilityFeature: feature, rowPaginationFeature: feature, rowSelectionFeature: feature, rowSortingFeature: feature, filteredRowModel: rowModelGetter, paginatedRowModel: rowModelGetter, sortedRowModel: rowModelGetter, filterFns: dict, sortFns: dict, } @module("@tanstack/react-table") external columnFilteringFeature: feature = "columnFilteringFeature" @module("@tanstack/react-table") external columnVisibilityFeature: feature = "columnVisibilityFeature" @module("@tanstack/react-table") external rowPaginationFeature: feature = "rowPaginationFeature" @module("@tanstack/react-table") external rowSelectionFeature: feature = "rowSelectionFeature" @module("@tanstack/react-table") external rowSortingFeature: feature = "rowSortingFeature" @module("@tanstack/react-table") external includesString: filterFn = "filterFn_includesString" @module("@tanstack/react-table") external alphanumeric: sortFn = "sortFn_alphanumeric" @module("@tanstack/react-table") external text: sortFn = "sortFn_text" @module("@tanstack/react-table") external tableFeatures: featuresOptions => features = "tableFeatures" @module("@tanstack/react-table") external filteredRowModelGetter: unit => rowModelGetter = "createFilteredRowModel" @module("@tanstack/react-table") external paginationRowModelGetter: unit => rowModelGetter = "createPaginatedRowModel" @module("@tanstack/react-table") external sortedRowModelGetter: unit => rowModelGetter = "createSortedRowModel" @module("@tanstack/react-table") external useTable: options<'data> => t<'data> = "useTable" @send external getHeaderGroups: t<'data> => array = "getHeaderGroups" @send external getRowModel: t<'data> => rowModel<'data> = "getRowModel" @send external getFilteredRowModel: t<'data> => rowModel<'data> = "getFilteredRowModel" @send external getFilteredSelectedRowModel: t<'data> => rowModel<'data> = "getFilteredSelectedRowModel" @send external getAllColumns: t<'data> => array = "getAllColumns" @send external getCanPreviousPage: t<'data> => bool = "getCanPreviousPage" @send external getCanNextPage: t<'data> => bool = "getCanNextPage" @send external previousPage: t<'data> => unit = "previousPage" @send external nextPage: t<'data> => unit = "nextPage" @send external getColumn: (t<'data>, string) => nullable = "getColumn" @send external getIsAllPageRowsSelected: t<'data> => bool = "getIsAllPageRowsSelected" @send external getIsSomePageRowsSelected: t<'data> => bool = "getIsSomePageRowsSelected" @send external toggleAllPageRowsSelected: (t<'data>, bool) => unit = "toggleAllPageRowsSelected" @get external hdrGroupId: hdrGroup => string = "id" @get external hdrGroupHeaders: hdrGroup => array = "headers" @get external hdrId: hdr => string = "id" @get external hdrIsPlaceholder: hdr => bool = "isPlaceholder" @send external getHdrCtx: hdr => hdrCtx<'data> = "getContext" @get external hdrCol: hdr => col = "column" @get external colColDef: col => colDef_ = "columnDef" @get external colDefHdr: colDef_ => 'a = "header" @get external colDefCell: colDef_ => 'a = "cell" @get external colId: col => string = "id" @send external colGetCanHide: col => bool = "getCanHide" @send external colGetIsVisible: col => bool = "getIsVisible" @send external colToggleVisibility: (col, bool) => unit = "toggleVisibility" @send external colGetIsSorted: col => string = "getIsSorted" @send external colToggleSorting: (col, bool) => unit = "toggleSorting" @send external colGetFilterValue: col => nullable = "getFilterValue" @send external colSetFilterValue: (col, string) => unit = "setFilterValue" @get external rowId: row<'data> => string = "id" @send external rowGetIsSelected: row<'data> => bool = "getIsSelected" @send external rowToggleSelected: (row<'data>, bool) => unit = "toggleSelected" @send external rowGetVisibleCells: row<'data> => array = "getVisibleCells" @get external rowOriginal: row<'data> => 'data = "original" @send external rowGetValue: (row<'data>, string) => 'a = "getValue" @get external cellId: cell => string = "id" @send external getCellCtx: cell => cellCtx<'data> = "getContext" @get external cellCol: cell => col = "column" @get external ctxRow: cellCtx<'data> => row<'data> = "row" @get external ctxCol: hdrCtx<'data> => col = "column" @get external ctxTable: hdrCtx<'data> => t<'data> = "table" } type numberFormat type numberFormatOpts = {style: string, currency: string} @scope("Intl") @new external makeNumberFormat: (string, numberFormatOpts) => numberFormat = "NumberFormat" @send external formatAmount: (numberFormat, float) => string = "format" @scope(("navigator", "clipboard")) @val external writeText: string => promise = "writeText" let features = RT.tableFeatures({ columnFilteringFeature: RT.columnFilteringFeature, columnVisibilityFeature: RT.columnVisibilityFeature, rowPaginationFeature: RT.rowPaginationFeature, rowSelectionFeature: RT.rowSelectionFeature, rowSortingFeature: RT.rowSortingFeature, filteredRowModel: RT.filteredRowModelGetter(), paginatedRowModel: RT.paginationRowModelGetter(), sortedRowModel: RT.sortedRowModelGetter(), filterFns: dict{"includesString": RT.includesString}, sortFns: dict{"alphanumeric": RT.alphanumeric, "text": RT.text}, }) let columns: array> = [ { id: "select", header: ctx => { let table = ctx->RT.ctxTable RT.getIsAllPageRowsSelected} indeterminate={table->RT.getIsSomePageRowsSelected && !(table->RT.getIsAllPageRowsSelected)} onCheckedChange={(v, _) => table->RT.toggleAllPageRowsSelected(v)} ariaLabel="Select all" /> }, cell: ctx => { let row = ctx->RT.ctxRow RT.rowGetIsSelected} onCheckedChange={(v, _) => row->RT.rowToggleSelected(v)} ariaLabel="Select row" /> }, enableSorting: false, enableHiding: false, }, { accessorKey: "status", header: _ => "Status"->React.string, cell: ctx => { let row = ctx->RT.ctxRow

{(row->RT.rowGetValue("status"): string)->React.string}

}, }, { accessorKey: "email", header: ctx => { let col = ctx->RT.ctxCol }, cell: ctx => { let row = ctx->RT.ctxRow

{(row->RT.rowGetValue("email"): string)->React.string}

}, }, { accessorKey: "amount", header: _ =>

{"Amount"->React.string}

, cell: ctx => { let row = ctx->RT.ctxRow let amount: float = row->RT.rowGetValue("amount") let formatted = makeNumberFormat( "en-US", ({style: "currency", currency: "USD"}: numberFormatOpts), )->formatAmount(amount)

{formatted->React.string}

}, }, { id: "actions", enableHiding: false, cell: ctx => { let payment = ctx->RT.ctxRow->RT.rowOriginal }> {"Open menu"->React.string} {"Actions"->React.string} { let _ = writeText(payment.id) }} > {"Copy payment ID"->React.string} {"View customer"->React.string} {"View payment details"->React.string} }, }, ] @react.componentWithProps(Demo.Props.t) let make = ({}: Demo.Props.t) => { let (sorting, setSorting) = React.useState(() => []) let (colFilters, setColFilters) = React.useState(() => []) let (colVisibility, setColVisibility) = React.useState(() => dict{}) let (rowSelection, setRowSelection) = React.useState(() => dict{}) let table = RT.useTable({ data: tableData, columns, features, onSortingChange: setSorting, onColumnFiltersChange: setColFilters, onColumnVisibilityChange: setColVisibility, onRowSelectionChange: setRowSelection, state: { sorting, columnFilters: colFilters, columnVisibility: colVisibility, rowSelection, }, }) let emailFilterValue = table ->RT.getColumn("email") ->Nullable.toOption ->Option.flatMap(col => col->RT.colGetFilterValue->Nullable.toOption) ->Option.getOr("")

table ->RT.getColumn("email") ->Nullable.toOption ->Option.forEach(col => col->RT.colSetFilterValue(value))} className="max-w-sm" /> }> {"Columns"->React.string} {table ->RT.getAllColumns ->Array.filter(RT.colGetCanHide) ->Array.map(col => RT.colId} className="capitalize" checked={col->RT.colGetIsVisible} onCheckedChange={(v, _) => col->RT.colToggleVisibility(v)} > {col->RT.colId->React.string} ) ->React.array}

{table ->RT.getHeaderGroups ->Array.map(hdrGroup => RT.hdrGroupId}> {hdrGroup ->RT.hdrGroupHeaders ->Array.map(hdr => RT.hdrId}> {hdr->RT.hdrIsPlaceholder ? React.null : RT.flexRender(hdr->RT.hdrCol->RT.colColDef->RT.colDefHdr, hdr->RT.getHdrCtx)} ) ->React.array} ) ->React.array} {if (table->RT.getRowModel).rows->Array.length > 0 { (table->RT.getRowModel).rows ->Array.map(row => RT.rowId} dataState=?{row->RT.rowGetIsSelected ? Some("selected") : None} > {row ->RT.rowGetVisibleCells ->Array.map(cell => RT.cellId}> {RT.flexRender( cell->RT.cellCol->RT.colColDef->RT.colDefCell, cell->RT.getCellCtx, )} ) ->React.array} ) ->React.array } else { Array.length} className="h-24 text-center"> {"No results."->React.string} }}

{(table->RT.getFilteredSelectedRowModel).rows->Array.length->Int.toString->React.string} {" of "->React.string} {(table->RT.getFilteredRowModel).rows->Array.length->Int.toString->React.string} {" row(s) selected."->React.string}

} 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@tanstack/react-table",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tanstack%2Freact-table","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@tanstack/react-table"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L4e",null,{"namespace":"@rescript-shadcn","registryDependencies":["@rescript-shadcn/Button","@rescript-shadcn/Checkbox","@rescript-shadcn/Demo","@rescript-shadcn/DropdownMenu","@rescript-shadcn/Icons","@rescript-shadcn/Input","@rescript-shadcn/Table"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/base/examples/DataTableDemo.res","content":"$50","type":"registry:example"}],"className":"h-[70svh] min-h-80"}]]}]