@rbxts/uiblox 0.2.0-alpha.34 → 0.2.0-alpha.36

package/out/ui/packages/index.d.ts

@@ -11,6 +11,7 @@ export * from "./layout/index";
 export * from "./preloader/index";
 export * from "./progressBar/index";
 export * from "./scroll/index";
+export * from "./reorder/index";
 export * from "./shadow/index";
 export * from "./sidebar/index";
 export * from "./toast/index";

package/out/ui/packages/init.luau

@@ -40,6 +40,9 @@ end
 for _k, _v in TS.import(script, script, "scroll") or {} do
 	exports[_k] = _v
 end
+for _k, _v in TS.import(script, script, "reorder") or {} do
+	exports[_k] = _v
+end
 for _k, _v in TS.import(script, script, "shadow") or {} do
 	exports[_k] = _v
 end

package/out/ui/packages/reorder/index.d.ts

@@ -0,0 +1,2 @@
+export { DragRect, hitRect, isReorderMove, isReorderPress, isReorderRelease, passedDragThreshold, placeItem, REORDER_THRESHOLD, transferId } from "./reorder";
+export { ReorderDragHandle, ReorderDragState, useReorderDrag } from "./useReorderDrag";

package/out/ui/packages/reorder/init.luau

@@ -0,0 +1,14 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+local _reorder = TS.import(script, script, "reorder")
+exports.hitRect = _reorder.hitRect
+exports.isReorderMove = _reorder.isReorderMove
+exports.isReorderPress = _reorder.isReorderPress
+exports.isReorderRelease = _reorder.isReorderRelease
+exports.passedDragThreshold = _reorder.passedDragThreshold
+exports.placeItem = _reorder.placeItem
+exports.REORDER_THRESHOLD = _reorder.REORDER_THRESHOLD
+exports.transferId = _reorder.transferId
+exports.useReorderDrag = TS.import(script, script, "useReorderDrag").useReorderDrag
+return exports

package/out/ui/packages/reorder/reorder.d.ts

@@ -0,0 +1,24 @@
+export declare const REORDER_THRESHOLD = 6;
+export interface DragRect {
+    id: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export declare function isReorderPress(kind: Enum.UserInputType): boolean;
+export declare function isReorderMove(kind: Enum.UserInputType): boolean;
+export declare function isReorderRelease(kind: Enum.UserInputType): boolean;
+export declare function passedDragThreshold(startX: number, startY: number, x: number, y: number, threshold?: number): boolean;
+/** Smallest rect containing the point wins, so a card beats the column behind it. */
+export declare function hitRect(rects: readonly DragRect[], x: number, y: number): string | undefined;
+/** Final index after the move. Out-of-range or a no-op returns a copy. */
+export declare function placeItem<T extends defined>(items: readonly T[], from: number, to: number): T[];
+/**
+ * Insert `id` at `index` in `dest` and remove it from `source`.
+ * The same list uses placeItem, where index is the final index.
+ */
+export declare function transferId(source: readonly string[], dest: readonly string[], id: string, index: number): {
+    source: string[];
+    dest: string[];
+};

package/out/ui/packages/reorder/reorder.luau

@@ -0,0 +1,178 @@
+-- Compiled with roblox-ts v3.0.0
+local REORDER_THRESHOLD = 6
+local function isReorderPress(kind)
+	return kind == Enum.UserInputType.MouseButton1 or kind == Enum.UserInputType.Touch
+end
+local function isReorderMove(kind)
+	return kind == Enum.UserInputType.MouseMovement or kind == Enum.UserInputType.Touch
+end
+local function isReorderRelease(kind)
+	return kind == Enum.UserInputType.MouseButton1 or kind == Enum.UserInputType.Touch
+end
+local function passedDragThreshold(startX, startY, x, y, threshold)
+	if threshold == nil then
+		threshold = REORDER_THRESHOLD
+	end
+	local dx = x - startX
+	local dy = y - startY
+	return dx * dx + dy * dy >= threshold * threshold
+end
+--* Smallest rect containing the point wins, so a card beats the column behind it. 
+local function hitRect(rects, x, y)
+	local best
+	local bestArea = math.huge
+	for _, rect in rects do
+		if x < rect.x or y < rect.y or x > rect.x + rect.width or y > rect.y + rect.height then
+			continue
+		end
+		local area = rect.width * rect.height
+		if area < bestArea then
+			best = rect
+			bestArea = area
+		end
+	end
+	local _result = best
+	if _result ~= nil then
+		_result = _result.id
+	end
+	return _result
+end
+--* Final index after the move. Out-of-range or a no-op returns a copy. 
+local function placeItem(items, from, to)
+	local listed = {}
+	for _, item in items do
+		table.insert(listed, item)
+	end
+	local count = #listed
+	if from < 0 or to < 0 or from >= count or to >= count or from == to then
+		return listed
+	end
+	local moved = listed[from + 1]
+	if from < to then
+		do
+			local index = from
+			local _shouldIncrement = false
+			while true do
+				if _shouldIncrement then
+					index += 1
+				else
+					_shouldIncrement = true
+				end
+				if not (index < to) then
+					break
+				end
+				listed[index + 1] = listed[index + 2]
+			end
+		end
+	else
+		do
+			local index = from
+			local _shouldIncrement = false
+			while true do
+				if _shouldIncrement then
+					index -= 1
+				else
+					_shouldIncrement = true
+				end
+				if not (index > to) then
+					break
+				end
+				listed[index + 1] = listed[index]
+			end
+		end
+	end
+	listed[to + 1] = moved
+	return listed
+end
+local function indexOfId(ids, id)
+	for index = 0, #ids - 1 do
+		if ids[index + 1] == id then
+			return index
+		end
+	end
+	return -1
+end
+--[[
+	*
+	 * Insert `id` at `index` in `dest` and remove it from `source`.
+	 * The same list uses placeItem, where index is the final index.
+	 
+]]
+local function transferId(source, dest, id, index)
+	if source == dest then
+		local placed = placeItem(source, indexOfId(source, id), math.clamp(index, 0, math.max(0, #source - 1)))
+		return {
+			source = placed,
+			dest = placed,
+		}
+	end
+	local nextSource = {}
+	local found = false
+	for _, item in source do
+		if item == id then
+			found = true
+		else
+			table.insert(nextSource, item)
+		end
+	end
+	local nextDest = {}
+	for _, item in dest do
+		table.insert(nextDest, item)
+	end
+	if not found then
+		return {
+			source = nextSource,
+			dest = nextDest,
+		}
+	end
+	local at = math.clamp(math.floor(index), 0, #nextDest)
+	local inserted = {}
+	do
+		local cursor = 0
+		local _shouldIncrement = false
+		while true do
+			if _shouldIncrement then
+				cursor += 1
+			else
+				_shouldIncrement = true
+			end
+			if not (cursor < at) then
+				break
+			end
+			local _arg0 = nextDest[cursor + 1]
+			table.insert(inserted, _arg0)
+		end
+	end
+	local _id = id
+	table.insert(inserted, _id)
+	do
+		local cursor = at
+		local _shouldIncrement = false
+		while true do
+			if _shouldIncrement then
+				cursor += 1
+			else
+				_shouldIncrement = true
+			end
+			if not (cursor < #nextDest) then
+				break
+			end
+			local _arg0 = nextDest[cursor + 1]
+			table.insert(inserted, _arg0)
+		end
+	end
+	return {
+		source = nextSource,
+		dest = inserted,
+	}
+end
+return {
+	isReorderPress = isReorderPress,
+	isReorderMove = isReorderMove,
+	isReorderRelease = isReorderRelease,
+	passedDragThreshold = passedDragThreshold,
+	hitRect = hitRect,
+	placeItem = placeItem,
+	transferId = transferId,
+	REORDER_THRESHOLD = REORDER_THRESHOLD,
+}

package/out/ui/packages/reorder/useReorderDrag.d.ts

@@ -0,0 +1,15 @@
+import { DragRect } from "./reorder";
+export interface ReorderDragState {
+    active: boolean;
+    id?: string;
+    overId?: string;
+    x: number;
+    y: number;
+}
+export interface ReorderDragHandle {
+    drag: ReorderDragState;
+    begin: (id: string, input: InputObject) => boolean;
+    cancel: () => void;
+    suppressClick: () => boolean;
+}
+export declare function useReorderDrag(onDrop: (fromId: string, overId?: string) => void, getRects: () => readonly DragRect[]): ReorderDragHandle;

package/out/ui/packages/reorder/useReorderDrag.luau

@@ -0,0 +1,129 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local useEffect = _react.useEffect
+local useRef = _react.useRef
+local useState = _react.useState
+local UserInputService = TS.import(script, TS.getModule(script, "@rbxts", "services")).UserInputService
+local _reorder = TS.import(script, script.Parent, "reorder")
+local hitRect = _reorder.hitRect
+local isReorderMove = _reorder.isReorderMove
+local isReorderPress = _reorder.isReorderPress
+local isReorderRelease = _reorder.isReorderRelease
+local passedDragThreshold = _reorder.passedDragThreshold
+local rest = function()
+	return {
+		active = false,
+		x = 0,
+		y = 0,
+	}
+end
+local function useReorderDrag(onDrop, getRects)
+	local drag, setDrag = useState(rest())
+	local tracking = useRef({
+		down = false,
+		active = false,
+		x = 0,
+		y = 0,
+		startX = 0,
+		startY = 0,
+	})
+	local onDropRef = useRef(onDrop)
+	local rectsRef = useRef(getRects)
+	local took = useRef(false)
+	onDropRef.current = onDrop
+	rectsRef.current = getRects
+	local clear = function(drop)
+		local current = tracking.current
+		tracking.current = {
+			down = false,
+			active = false,
+			x = 0,
+			y = 0,
+			startX = 0,
+			startY = 0,
+		}
+		setDrag(rest())
+		if drop and current.active and current.id ~= nil then
+			took.current = true
+			onDropRef.current(current.id, current.overId)
+		end
+	end
+	useEffect(function()
+		local changed = UserInputService.InputChanged:Connect(function(input)
+			local current = tracking.current
+			if not current.down or not isReorderMove(input.UserInputType) then
+				return nil
+			end
+			local x = input.Position.X
+			local y = input.Position.Y
+			local active = current.active or passedDragThreshold(current.startX, current.startY, x, y)
+			local overId = if active then hitRect(rectsRef.current(), x, y) else nil
+			local _object = table.clone(current)
+			setmetatable(_object, nil)
+			_object.active = active
+			_object.x = x
+			_object.y = y
+			_object.overId = overId
+			tracking.current = _object
+			if active then
+				setDrag({
+					active = true,
+					id = current.id,
+					overId = overId,
+					x = x,
+					y = y,
+				})
+			end
+		end)
+		local ended = UserInputService.InputEnded:Connect(function(input)
+			if not tracking.current.down or not isReorderRelease(input.UserInputType) then
+				return nil
+			end
+			clear(true)
+		end)
+		local began = UserInputService.InputBegan:Connect(function(input)
+			if input.KeyCode == Enum.KeyCode.Escape then
+				clear(false)
+			end
+		end)
+		return function()
+			changed:Disconnect()
+			ended:Disconnect()
+			began:Disconnect()
+		end
+	end, {})
+	return {
+		drag = drag,
+		begin = function(id, input)
+			if not isReorderPress(input.UserInputType) then
+				return false
+			end
+			local x = input.Position.X
+			local y = input.Position.Y
+			tracking.current = {
+				down = true,
+				active = false,
+				id = id,
+				x = x,
+				y = y,
+				startX = x,
+				startY = y,
+			}
+			return true
+		end,
+		cancel = function()
+			return clear(false)
+		end,
+		suppressClick = function()
+			if not took.current then
+				return false
+			end
+			took.current = false
+			return true
+		end,
+	}
+end
+return {
+	useReorderDrag = useReorderDrag,
+}

package/out/ui/packages/table/components/Table.d.ts

@@ -1,9 +1,22 @@
+import React from "@rbxts/react";
 import { CustomizedProps } from "../../../../theme/index";
+import { TableAlign, TableSortDirection } from "./tableColumns";
+export interface TableColumn {
+    header: string | React.ReactNode;
+    width?: number | UDim;
+    flex?: number;
+    align?: TableAlign;
+    sortable?: boolean;
+}
+export type TableCell = string | React.ReactNode;
 export interface TableProps {
-    columns: string[];
-    rows: string[][];
+    columns: Array<string | TableColumn>;
+    rows: Array<Array<TableCell>>;
     selected?: number;
     dense?: boolean;
+    sortColumn?: number;
+    sortDirection?: TableSortDirection;
+    onSort?: (column: number) => void;
     onRowActivated?: (index: number) => void;
 }
 declare function Table(props: CustomizedProps<Frame, TableProps>): JSX.Element;

package/out/ui/packages/table/components/Table.luau

@@ -2,15 +2,33 @@
 local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local cx = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").cx
-local rowSelected = TS.import(script, script.Parent, "rowSelected").rowSelected
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
+local rowSelected = TS.import(script, script.Parent, "rowSelected").rowSelected
+local _tableColumns = TS.import(script, script.Parent, "tableColumns")
+local canSort = _tableColumns.canSort
+local columnSizes = _tableColumns.columnSizes
+local headerText = _tableColumns.headerText
+local isTextCell = _tableColumns.isTextCell
+local resolveColumn = _tableColumns.resolveColumn
 local useTableStyles = TS.import(script, script.Parent, "Table.styles").default
+local function textAlign(align)
+	if align == "center" then
+		return Enum.TextXAlignment.Center
+	end
+	if align == "right" then
+		return Enum.TextXAlignment.Right
+	end
+	return Enum.TextXAlignment.Left
+end
 local function Table(props)
 	local _binding = props
 	local columns = _binding.columns
 	local rows = _binding.rows
 	local selected = _binding.selected
 	local dense = _binding.dense
+	local sortColumn = _binding.sortColumn
+	local sortDirection = _binding.sortDirection
+	local onSort = _binding.onSort
 	local onRowActivated = _binding.onRowActivated
 	local className = _binding.className
 	local sx = _binding.sx
@@ -19,7 +37,17 @@ local function Table(props)
 	local styles = useTableStyles({
 		dense = dense,
 	})
-	local width = if #columns > 0 then 1 / #columns else 1
+	-- ▼ ReadonlyArray.map ▼
+	local _newValue = table.create(#columns)
+	local _callback = function(column)
+		return resolveColumn(column)
+	end
+	for _k, _v in columns do
+		_newValue[_k] = _callback(_v, _k - 1, columns)
+	end
+	-- ▲ ReadonlyArray.map ▲
+	local resolved = _newValue
+	local sizes = columnSizes(resolved)
 	local _attributes = {
 		tag = "frame",
 	}
@@ -52,27 +80,72 @@ local function Table(props)
 	setmetatable(_attributes_5, nil)
 	local _exp_3 = React.createElement("uilistlayout", _attributes_5)
 	-- ▼ ReadonlyArray.map ▼
-	local _newValue = table.create(#columns)
-	local _callback = function(label, index)
-		local _attributes_6 = {
-			key = `h-{label}-{index}`,
-		}
-		for _k, _v in cx(styles.cell, styles.headerCell) do
-			_attributes_6[_k] = _v
+	local _newValue_1 = table.create(#resolved)
+	local _callback_1 = function(column, index)
+		local size = sizes[index + 1]
+		local box = UDim2.new(size.scale, size.offset, 0, 0)
+		local align = textAlign(column.align)
+		local active = sortColumn == index and column.sortable
+		local _header = column.header
+		local label = if type(_header) == "string" then headerText(column.header, active, sortDirection) else nil
+		local clickable = canSort(column.sortable, onSort ~= nil)
+		if clickable then
+			local _attributes_6 = {
+				key = `h-{index}`,
+			}
+			for _k, _v in (cx(styles.cell, styles.headerCell)) do
+				_attributes_6[_k] = _v
+			end
+			local _condition_1 = label
+			if _condition_1 == nil then
+				_condition_1 = ""
+			end
+			_attributes_6.Text = _condition_1
+			_attributes_6.Size = box
+			_attributes_6.TextXAlignment = align
+			_attributes_6.AutoButtonColor = false
+			_attributes_6.LayoutOrder = index
+			_attributes_6.Event = {
+				Activated = function()
+					local _result = onSort
+					if _result ~= nil then
+						_result = _result(index)
+					end
+					return _result
+				end,
+			}
+			return React.createElement("textbutton", _attributes_6, label == nil and (column.header))
 		end
-		_attributes_6.Text = label
-		_attributes_6.Size = UDim2.new(width, 0, 0, 0)
-		_attributes_6.LayoutOrder = index
-		return React.createElement("textlabel", _attributes_6)
+		if label ~= nil then
+			local _attributes_6 = {
+				key = `h-{index}`,
+			}
+			for _k, _v in cx(styles.cell, styles.headerCell) do
+				_attributes_6[_k] = _v
+			end
+			_attributes_6.Text = label
+			_attributes_6.Size = box
+			_attributes_6.TextXAlignment = align
+			_attributes_6.LayoutOrder = index
+			return React.createElement("textlabel", _attributes_6)
+		end
+		return React.createElement("frame", {
+			key = `h-{index}`,
+			Size = box,
+			AutomaticSize = Enum.AutomaticSize.Y,
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			LayoutOrder = index,
+		}, column.header)
 	end
-	for _k, _v in columns do
-		_newValue[_k] = _callback(_v, _k - 1, columns)
+	for _k, _v in resolved do
+		_newValue_1[_k] = _callback_1(_v, _k - 1, resolved)
 	end
 	-- ▲ ReadonlyArray.map ▲
-	local _exp_4 = React.createElement("frame", _attributes_3, _exp_2, _exp_3, React.createElement(React.Fragment, nil, _newValue))
+	local _exp_4 = React.createElement("frame", _attributes_3, _exp_2, _exp_3, React.createElement(React.Fragment, nil, _newValue_1))
 	-- ▼ ReadonlyArray.map ▼
-	local _newValue_1 = table.create(#rows)
-	local _callback_1 = function(cells, rowIndex)
+	local _newValue_2 = table.create(#rows)
+	local _callback_2 = function(cells, rowIndex)
 		local _attributes_6 = {
 			key = `r-{rowIndex}`,
 		}
@@ -96,34 +169,48 @@ local function Table(props)
 		setmetatable(_attributes_8, nil)
 		local _exp_6 = React.createElement("uilistlayout", _attributes_8)
 		-- ▼ ReadonlyArray.map ▼
-		local _newValue_2 = table.create(#columns)
-		local _callback_2 = function(_, colIndex)
-			local _attributes_9 = {
-				key = `c-{rowIndex}-{colIndex}`,
-			}
-			for _k, _v in styles.cell do
-				_attributes_9[_k] = _v
-			end
-			local _condition_1 = cells[colIndex + 1]
-			if _condition_1 == nil then
-				_condition_1 = ""
+		local _newValue_3 = table.create(#resolved)
+		local _callback_3 = function(column, colIndex)
+			local size = sizes[colIndex + 1]
+			local box = UDim2.new(size.scale, size.offset, 0, 0)
+			local value = cells[colIndex + 1]
+			if isTextCell(value) then
+				local _attributes_9 = {
+					key = `c-{rowIndex}-{colIndex}`,
+				}
+				for _k, _v in styles.cell do
+					_attributes_9[_k] = _v
+				end
+				local _condition_1 = value
+				if _condition_1 == nil then
+					_condition_1 = ""
+				end
+				_attributes_9.Text = _condition_1
+				_attributes_9.Size = box
+				_attributes_9.TextXAlignment = textAlign(column.align)
+				_attributes_9.LayoutOrder = colIndex
+				return React.createElement("textlabel", _attributes_9)
 			end
-			_attributes_9.Text = _condition_1
-			_attributes_9.Size = UDim2.new(width, 0, 0, 0)
-			_attributes_9.LayoutOrder = colIndex
-			return React.createElement("textlabel", _attributes_9)
+			return React.createElement("frame", {
+				key = `c-{rowIndex}-{colIndex}`,
+				Size = box,
+				AutomaticSize = Enum.AutomaticSize.Y,
+				BackgroundTransparency = 1,
+				BorderSizePixel = 0,
+				LayoutOrder = colIndex,
+			}, value)
 		end
-		for _k, _v in columns do
-			_newValue_2[_k] = _callback_2(_v, _k - 1, columns)
+		for _k, _v in resolved do
+			_newValue_3[_k] = _callback_3(_v, _k - 1, resolved)
 		end
 		-- ▲ ReadonlyArray.map ▲
-		return React.createElement("textbutton", _attributes_6, _exp_5, _exp_6, React.createElement(React.Fragment, nil, _newValue_2))
+		return React.createElement("textbutton", _attributes_6, _exp_5, _exp_6, React.createElement(React.Fragment, nil, _newValue_3))
 	end
 	for _k, _v in rows do
-		_newValue_1[_k] = _callback_1(_v, _k - 1, rows)
+		_newValue_2[_k] = _callback_2(_v, _k - 1, rows)
 	end
 	-- ▲ ReadonlyArray.map ▲
-	return React.createElement(SxHost, _attributes, _exp, _exp_1, _exp_4, React.createElement(React.Fragment, nil, _newValue_1))
+	return React.createElement(SxHost, _attributes, _exp, _exp_1, _exp_4, React.createElement(React.Fragment, nil, _newValue_2))
 end
 local default = Table
 return {

package/out/ui/packages/table/components/tableColumns.d.ts

@@ -0,0 +1,26 @@
+export type TableAlign = "left" | "center" | "right";
+export type TableSortDirection = "asc" | "desc";
+export interface TableColumnSpec {
+    header: unknown;
+    width?: number | UDim;
+    flex?: number;
+    align?: TableAlign;
+    sortable?: boolean;
+}
+export interface ResolvedColumn {
+    header: unknown;
+    width?: number | UDim;
+    flex?: number;
+    align: TableAlign;
+    sortable: boolean;
+}
+export interface ColumnSize {
+    scale: number;
+    offset: number;
+}
+export declare function resolveColumn(column: string | TableColumnSpec): ResolvedColumn;
+/** Scale/offset for each column. Number widths are scales. Flex shares whatever scale is left. */
+export declare function columnSizes(columns: ReadonlyArray<Pick<ResolvedColumn, "width" | "flex">>): ColumnSize[];
+export declare function isTextCell(value: unknown): value is string | undefined;
+export declare function canSort(sortable: boolean | undefined, hasHandler: boolean): boolean;
+export declare function headerText(label: string, active: boolean, direction?: TableSortDirection): string;

package/out/ui/packages/table/components/tableColumns.luau

@@ -0,0 +1,92 @@
+-- Compiled with roblox-ts v3.0.0
+local function resolveColumn(column)
+	local _column = column
+	if type(_column) == "string" then
+		return {
+			header = column,
+			align = "left",
+			sortable = false,
+		}
+	end
+	return {
+		header = column.header,
+		width = column.width,
+		flex = column.flex,
+		align = column.align or "left",
+		sortable = column.sortable == true,
+	}
+end
+--* Scale/offset for each column. Number widths are scales. Flex shares whatever scale is left. 
+local function columnSizes(columns)
+	local fixed = 0
+	local flexTotal = 0
+	for _, column in columns do
+		local width = column.width
+		if type(width) == "number" then
+			fixed += width
+		elseif width ~= nil then
+			fixed += width.Scale
+		else
+			local _condition = column.flex
+			if _condition == nil then
+				_condition = 1
+			end
+			flexTotal += _condition
+		end
+	end
+	local remain = math.max(0, 1 - fixed)
+	local sizes = {}
+	for _, column in columns do
+		local width = column.width
+		if type(width) == "number" then
+			local _arg0 = {
+				scale = width,
+				offset = 0,
+			}
+			table.insert(sizes, _arg0)
+		elseif width ~= nil then
+			local _arg0 = {
+				scale = width.Scale,
+				offset = width.Offset,
+			}
+			table.insert(sizes, _arg0)
+		else
+			local _condition = column.flex
+			if _condition == nil then
+				_condition = 1
+			end
+			local flex = _condition
+			local share = if flexTotal > 0 then (flex / flexTotal) * remain else 0
+			local _arg0 = {
+				scale = share,
+				offset = 0,
+			}
+			table.insert(sizes, _arg0)
+		end
+	end
+	return sizes
+end
+local function isTextCell(value)
+	local _value = value
+	local _condition = type(_value) == "string"
+	if not _condition then
+		_condition = value == nil
+	end
+	return _condition
+end
+local function canSort(sortable, hasHandler)
+	return sortable == true and hasHandler
+end
+local function headerText(label, active, direction)
+	if not active then
+		return label
+	end
+	return if direction == "desc" then `{label} ↓` else `{label} ↑`
+end
+return {
+	resolveColumn = resolveColumn,
+	columnSizes = columnSizes,
+	isTextCell = isTextCell,
+	canSort = canSort,
+	headerText = headerText,
+}

package/out/ui/packages/table/index.d.ts

@@ -1,2 +1,3 @@
 export { default as Table } from "./components/Table";
-export { TableProps } from "./components/Table";
+export { TableProps, TableColumn, TableCell } from "./components/Table";
+export { TableAlign, TableSortDirection } from "./components/tableColumns";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@rbxts/uiblox",
-	"version": "0.2.0-alpha.34",
+	"version": "0.2.0-alpha.36",
 	"description": "UI Library and theming for roblox-ts projects",
 	"main": "out/init.luau",
 	"packageManager": "pnpm@11.3.0",
@@ -8,7 +8,7 @@
 		"build": "rbxtsc",
 		"watch": "rbxtsc -w",
 		"pack:check": "node scripts/pack-check.mjs",
-		"test": "node scripts/no-internal-refs.check.mjs && node scripts/import-case.check.mjs && node --experimental-strip-types scripts/theme-scope.check.mjs && node --experimental-strip-types scripts/style-types.check.mjs && node --experimental-strip-types scripts/style-cache.check.mjs && node --experimental-strip-types scripts/style-variants.check.mjs && node --experimental-strip-types scripts/component-styles.check.mjs && node --experimental-strip-types scripts/interaction-styles.check.mjs && node --experimental-strip-types scripts/resolve-style.check.mjs && node --experimental-strip-types scripts/resolve-sx.check.mjs && node --experimental-strip-types scripts/sx-prop.check.mjs && node --experimental-strip-types scripts/style-system.check.mjs && node --experimental-strip-types scripts/host-sx.check.mjs && node --experimental-strip-types scripts/density.check.mjs && node --experimental-strip-types scripts/styles.check.mjs && node --experimental-strip-types scripts/contrast.check.mjs && node --experimental-strip-types scripts/primitives.check.mjs && node scripts/state-matrix-registers.check.mjs && node --experimental-strip-types scripts/paper.check.mjs && node --experimental-strip-types scripts/list-item.check.mjs && node --experimental-strip-types scripts/slider.check.mjs && node --experimental-strip-types scripts/input.check.mjs && node --experimental-strip-types scripts/menu.check.mjs && node --experimental-strip-types scripts/guard.check.mjs && node --experimental-strip-types scripts/breakpoints.check.mjs && node --experimental-strip-types scripts/viewport-observer.check.mjs && node --experimental-strip-types scripts/focus-trap.check.mjs && node --experimental-strip-types scripts/select-typeahead.check.mjs && node --experimental-strip-types scripts/select-groups.check.mjs && node --experimental-strip-types scripts/select-multi.check.mjs && node --experimental-strip-types scripts/select-polish.check.mjs && node --experimental-strip-types scripts/reduced-motion.check.mjs && node --experimental-strip-types scripts/card.check.mjs && node --experimental-strip-types scripts/chip.check.mjs && node --experimental-strip-types scripts/badge.check.mjs && node --experimental-strip-types scripts/avatar.check.mjs && node --experimental-strip-types scripts/imageList.check.mjs && node --experimental-strip-types scripts/drawer.check.mjs && node --experimental-strip-types scripts/breadcrumbs.check.mjs && node --experimental-strip-types scripts/pagination.check.mjs && node --experimental-strip-types scripts/stepper.check.mjs && node --experimental-strip-types scripts/accordion.check.mjs && node --experimental-strip-types scripts/snackbar.check.mjs && node --experimental-strip-types scripts/table.check.mjs && node --experimental-strip-types scripts/autocomplete.check.mjs && node --experimental-strip-types scripts/field-loading.check.mjs && node --experimental-strip-types scripts/fab.check.mjs && node --experimental-strip-types scripts/appbar.check.mjs && node --experimental-strip-types scripts/bottom-navigation.check.mjs && node --experimental-strip-types scripts/alert.check.mjs && node --experimental-strip-types scripts/toggle-button.check.mjs && node --experimental-strip-types scripts/link.check.mjs && node --experimental-strip-types scripts/rating.check.mjs && node --experimental-strip-types scripts/stack.check.mjs && node --experimental-strip-types scripts/flex-item.check.mjs && node --experimental-strip-types scripts/grid.check.mjs && node --experimental-strip-types scripts/speed-dial.check.mjs && node --experimental-strip-types scripts/form-text.check.mjs && node --experimental-strip-types scripts/box.check.mjs && node --experimental-strip-types scripts/scroll-view.check.mjs && node --experimental-strip-types scripts/image-list.check.mjs && node --experimental-strip-types scripts/radio-group.check.mjs && node --experimental-strip-types scripts/container.check.mjs && node --experimental-strip-types scripts/divider.check.mjs && node --experimental-strip-types scripts/markdown.check.mjs && node --experimental-strip-types scripts/switch.check.mjs && node --experimental-strip-types scripts/tabs.check.mjs && node --experimental-strip-types scripts/dialog.check.mjs && node --experimental-strip-types scripts/backdrop.check.mjs && node --experimental-strip-types scripts/cframe-editor.check.mjs && node --experimental-strip-types scripts/enum-picker.check.mjs && node --experimental-strip-types scripts/number-range.check.mjs && node --experimental-strip-types scripts/date-range.check.mjs && node --experimental-strip-types scripts/sparkline.check.mjs && node --experimental-strip-types scripts/rect-editor.check.mjs && node --experimental-strip-types scripts/asset-field.check.mjs && node --experimental-strip-types scripts/gradient-editor.check.mjs && node --experimental-strip-types scripts/ray-editor.check.mjs && node --experimental-strip-types scripts/physical-properties.check.mjs && node --experimental-strip-types scripts/brickcolor-picker.check.mjs",
+		"test": "node scripts/no-internal-refs.check.mjs && node scripts/import-case.check.mjs && node --experimental-strip-types scripts/theme-scope.check.mjs && node --experimental-strip-types scripts/style-types.check.mjs && node --experimental-strip-types scripts/style-cache.check.mjs && node --experimental-strip-types scripts/style-variants.check.mjs && node --experimental-strip-types scripts/component-styles.check.mjs && node --experimental-strip-types scripts/interaction-styles.check.mjs && node --experimental-strip-types scripts/resolve-style.check.mjs && node --experimental-strip-types scripts/resolve-sx.check.mjs && node --experimental-strip-types scripts/sx-prop.check.mjs && node --experimental-strip-types scripts/style-system.check.mjs && node --experimental-strip-types scripts/host-sx.check.mjs && node --experimental-strip-types scripts/density.check.mjs && node --experimental-strip-types scripts/styles.check.mjs && node --experimental-strip-types scripts/contrast.check.mjs && node --experimental-strip-types scripts/primitives.check.mjs && node scripts/state-matrix-registers.check.mjs && node --experimental-strip-types scripts/paper.check.mjs && node --experimental-strip-types scripts/list-item.check.mjs && node --experimental-strip-types scripts/slider.check.mjs && node --experimental-strip-types scripts/input.check.mjs && node --experimental-strip-types scripts/menu.check.mjs && node --experimental-strip-types scripts/guard.check.mjs && node --experimental-strip-types scripts/breakpoints.check.mjs && node --experimental-strip-types scripts/viewport-observer.check.mjs && node --experimental-strip-types scripts/focus-trap.check.mjs && node --experimental-strip-types scripts/select-typeahead.check.mjs && node --experimental-strip-types scripts/select-groups.check.mjs && node --experimental-strip-types scripts/select-multi.check.mjs && node --experimental-strip-types scripts/select-polish.check.mjs && node --experimental-strip-types scripts/reduced-motion.check.mjs && node --experimental-strip-types scripts/card.check.mjs && node --experimental-strip-types scripts/chip.check.mjs && node --experimental-strip-types scripts/badge.check.mjs && node --experimental-strip-types scripts/avatar.check.mjs && node --experimental-strip-types scripts/imageList.check.mjs && node --experimental-strip-types scripts/drawer.check.mjs && node --experimental-strip-types scripts/breadcrumbs.check.mjs && node --experimental-strip-types scripts/pagination.check.mjs && node --experimental-strip-types scripts/stepper.check.mjs && node --experimental-strip-types scripts/accordion.check.mjs && node --experimental-strip-types scripts/snackbar.check.mjs && node --experimental-strip-types scripts/table.check.mjs && node --experimental-strip-types scripts/table-columns.check.mjs && node --experimental-strip-types scripts/reorder.check.mjs && node --experimental-strip-types scripts/autocomplete.check.mjs && node --experimental-strip-types scripts/field-loading.check.mjs && node --experimental-strip-types scripts/fab.check.mjs && node --experimental-strip-types scripts/appbar.check.mjs && node --experimental-strip-types scripts/bottom-navigation.check.mjs && node --experimental-strip-types scripts/alert.check.mjs && node --experimental-strip-types scripts/toggle-button.check.mjs && node --experimental-strip-types scripts/link.check.mjs && node --experimental-strip-types scripts/rating.check.mjs && node --experimental-strip-types scripts/stack.check.mjs && node --experimental-strip-types scripts/flex-item.check.mjs && node --experimental-strip-types scripts/grid.check.mjs && node --experimental-strip-types scripts/speed-dial.check.mjs && node --experimental-strip-types scripts/form-text.check.mjs && node --experimental-strip-types scripts/box.check.mjs && node --experimental-strip-types scripts/scroll-view.check.mjs && node --experimental-strip-types scripts/image-list.check.mjs && node --experimental-strip-types scripts/radio-group.check.mjs && node --experimental-strip-types scripts/container.check.mjs && node --experimental-strip-types scripts/divider.check.mjs && node --experimental-strip-types scripts/markdown.check.mjs && node --experimental-strip-types scripts/switch.check.mjs && node --experimental-strip-types scripts/tabs.check.mjs && node --experimental-strip-types scripts/dialog.check.mjs && node --experimental-strip-types scripts/backdrop.check.mjs && node --experimental-strip-types scripts/cframe-editor.check.mjs && node --experimental-strip-types scripts/enum-picker.check.mjs && node --experimental-strip-types scripts/number-range.check.mjs && node --experimental-strip-types scripts/date-range.check.mjs && node --experimental-strip-types scripts/sparkline.check.mjs && node --experimental-strip-types scripts/rect-editor.check.mjs && node --experimental-strip-types scripts/asset-field.check.mjs && node --experimental-strip-types scripts/gradient-editor.check.mjs && node --experimental-strip-types scripts/ray-editor.check.mjs && node --experimental-strip-types scripts/physical-properties.check.mjs && node --experimental-strip-types scripts/brickcolor-picker.check.mjs",
 		"prepublishOnly": "pnpm build"
 	},
 	"keywords": [