Back to LibraryData Display
Data Table
Added Aug 9, 2026
A full-featured data table: sortable columns, a search box, pagination, row-selection checkboxes, a column-visibility toggle, and per-row actions. Options are fully configurable from the Settings tab. Inspired by the shadcn/ui Data Table component.
Dark Mode
Actions
successmorgan.lee@copysnips.com$189.50
successpriya.nair@copysnips.com$452.75
processingdiego.alvarez@copysnips.com$610.00
failedhannah.wu@copysnips.com$233.20
successfelix.moreau@copysnips.com$875.40
0 of 8 row(s) selected.
Page 1 of 2
CopySnips Live Preview
How to Use
- On the Settings tab, edit the "Rows" list: each row has a Status (free text, e.g. success/processing/failed; colors that value if it matches one of those three, gray otherwise), an Email, and an Amount (plain digits, formatted to "$#,##0.00" automatically). Row IDs are assigned automatically from list position.
- Paste the YAML into Power Apps Studio (Ctrl+V). Two independent GroupContainers are added: conDataTable (the table itself) and conDataTableColumnsPanel (the column-visibility dropdown), positioned near the "Columns" button. They are NOT nested, every size is literal/self-referencing, more reliable in ManualLayout than cross-referenced sizing.
- Click a column header (Status/Email/Amount) to sort by it; click again to flip direction. Type in the search box to filter by Email or Status (resets to page 1). Previous/Next paginate 5 rows at a time; both buttons auto-disable at the start/end.
- Click "Columns ▾" to open a panel toggling which of Status/Email/Amount are shown. Hiding a column does NOT reflow the columns after it to fill the gap (a deliberate reliability trade-off; closing that gap would need fragile cross-control width formulas).
- Click a row's checkbox to select it, or the header checkbox to select/deselect every row on the CURRENT page. Selection is tracked in the colDataTableSelected Collection ({Id: number} rows) and the footer shows "X of Y row(s) selected."
- Each row has View / Delete buttons instead of a dropdown ⋮ menu (a floating per-row menu risks being clipped by the Gallery template's own bounds). View stores the row's Id in varDataTableViewingId for you to react to elsewhere; Delete is a placeholder (removes the row from the selection set + shows a warning toast) since the underlying data is a static array, not a live data source; wire OnSelect to your real Remove()/Patch() call once connected to one.
- No OnVisible initialisation needed: every variable/Collection defaults correctly (blank booleans read as "shown" via Coalesce(var, true), blank page reads as 1 via Coalesce(var, 1)).
Problem Solved
Provides a complete, interactive data grid (sort, search, paginate, multi-select, hide columns) which Power Apps has no single native control for (you'd otherwise hand-build each piece separately on top of a plain Gallery).
Integration
The website builds a Power Fx array-of-records literal from your Rows list and bakes it into the copied YAML as galDataTableSource.Items (columns: Id, Status, Email, Amount). Every other formula (search, sort, pagination, footer counts) reads from galDataTableSource.AllItems rather than the literal directly. To swap in a real data source, replace galDataTableSource.Items with a table/collection reference that has matching Id/Status/Email/Amount columns.
YAML Code
- conDataTable:
Control: GroupContainer@1.5.0
Variant: ManualLayout
Properties:
BorderColor: =RGBA(226, 232, 240, 1)
BorderThickness: =1
DropShadow: =DropShadow.None
Fill: =RGBA(255, 255, 255, 1)
Height: =400
RadiusBottomLeft: =8
RadiusBottomRight: =8
RadiusTopLeft: =8
RadiusTopRight: =8
Width: =640
X: =20
Y: =20
Children:
- galDataTableSource:
Control: Gallery@2.15.0
Variant: Vertical
Properties:
DelayItemLoading: =false
Items: =[{Id:1,Status:"success",Email:"morgan.lee@copysnips.com",Amount:189.5}, {Id:2,Status:"success",Email:"priya.nair@copysnips.com",Amount:452.75}, {Id:3,Status:"processing",Email:"diego.alvarez@copysnips.com",Amount:610}, {Id:4,Status:"failed",Email:"hannah.wu@copysnips.com",Amount:233.2}, {Id:5,Status:"success",Email:"felix.moreau@copysnips.com",Amount:875.4}, {Id:6,Status:"processing",Email:"aisha.khan@copysnips.com",Amount:95.6}, {Id:7,Status:"failed",Email:"tomas.novak@copysnips.com",Amount:342.1}, {Id:8,Status:"success",Email:"lindiwe.dube@copysnips.com",Amount:528.9}]
TemplateSize: =1
Visible: =false
Height: =1
Width: =1
X: =0
Y: =0
- inputDataTableSearch:
Control: Classic/TextInput@2.3.2
Properties:
BorderColor: =RGBA(226, 232, 240, 1)
BorderThickness: =1
Color: =RGBA(15, 23, 42, 1)
Default: =""
Font: =Font.'Open Sans'
HintText: ="Filter emails..."
OnChange: =Set(varDataTableSearch, Self.Text); Set(varDataTablePage, 1)
RadiusBottomLeft: =6
RadiusBottomRight: =6
RadiusTopLeft: =6
RadiusTopRight: =6
Size: =10
Height: =36
Width: =220
X: =12
Y: =12
- btnDataTableColumnsToggle:
Control: Classic/Button@2.2.0
Properties:
Align: =Align.Center
BorderColor: =RGBA(226, 232, 240, 1)
BorderStyle: =BorderStyle.Solid
BorderThickness: =1
Color: =RGBA(51, 65, 85, 1)
DisabledBorderColor: =RGBA(226, 232, 240, 1)
Fill: =RGBA(255, 255, 255, 1)
FocusedBorderColor: =RGBA(226, 232, 240, 1)
FocusedBorderThickness: =1
Font: =Font.'Open Sans'
HoverBorderColor: =RGBA(203, 213, 225, 1)
HoverColor: =RGBA(51, 65, 85, 1)
HoverFill: =RGBA(248, 250, 252, 1)
OnSelect: =Set(varDataTableColumnsOpen, !varDataTableColumnsOpen)
PressedBorderColor: =RGBA(203, 213, 225, 1)
PressedFill: =RGBA(241, 245, 249, 1)
RadiusBottomLeft: =6
RadiusBottomRight: =6
RadiusTopLeft: =6
RadiusTopRight: =6
Size: =10
Text: ="Columns ▾"
Height: =36
Width: =136
X: =492
Y: =12
- conHeaderRow:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
DropShadow: =DropShadow.None
LayoutDirection: =LayoutDirection.Horizontal
LayoutJustifyContent: =LayoutJustifyContent.Start
LayoutAlignItems: =LayoutAlignItems.Center
LayoutGap: =8
LayoutWrap: =false
PaddingLeft: =2
PaddingRight: =5
Height: =32
Width: =616
X: =12
Y: =60
Children:
- chkDataTableHeaderSelectAll:
Control: Classic/Button@2.2.0
Properties:
AlignInContainer: =AlignInContainer.Center
FillPortions: =0
Align: =Align.Center
BorderColor: =RGBA(203, 213, 225, 1)
BorderStyle: =BorderStyle.Solid
BorderThickness: =1
Color: =RGBA(255, 255, 255, 1)
DisabledBorderColor: =RGBA(226, 232, 240, 1)
Fill: =If(CountRows(Filter(galDataTableRows.AllItems, Id in colDataTableSelected.Id)) = CountRows(galDataTableRows.AllItems) && CountRows(galDataTableRows.AllItems) > 0, RGBA(15, 23, 42, 1), RGBA(255, 255, 255, 1))
FocusedBorderColor: =RGBA(203, 213, 225, 1)
FocusedBorderThickness: =1
Font: =Font.'Open Sans'
HoverBorderColor: =RGBA(148, 163, 184, 1)
HoverColor: =RGBA(255, 255, 255, 1)
HoverFill: =RGBA(51, 65, 85, 1)
OnSelect: '=With({_page: galDataTableRows.AllItems}, If(CountRows(Filter(_page, Id in colDataTableSelected.Id)) = CountRows(_page) && CountRows(_page) > 0, Remove(colDataTableSelected, Filter(colDataTableSelected, Id in _page.Id)), Collect(colDataTableSelected, ForAll(Filter(_page, !(Id in colDataTableSelected.Id)), {Id: ThisRecord.Id}))))'
PressedBorderColor: =RGBA(148, 163, 184, 1)
PressedFill: =RGBA(30, 41, 59, 1)
RadiusBottomLeft: =4
RadiusBottomRight: =4
RadiusTopLeft: =4
RadiusTopRight: =4
Size: =9
Text: =If(CountRows(Filter(galDataTableRows.AllItems, Id in colDataTableSelected.Id)) = CountRows(galDataTableRows.AllItems) && CountRows(galDataTableRows.AllItems) > 0, "✓", "")
Height: =20
Width: =20
- conHeaderStatusWrap:
Control: GroupContainer@1.5.0
Variant: ManualLayout
Properties:
AlignInContainer: =AlignInContainer.Center
FillPortions: =0
DropShadow: =DropShadow.None
Fill: =RGBA(0, 0, 0, 0)
Visible: =Coalesce(varDataTableShowStatus, true)
Height: =32
Width: =90
Children:
- btnDataTableSortStatus:
Control: Classic/Button@2.2.0
Properties:
Align: =Align.Left
BorderColor: =RGBA(0, 0, 0, 0)
BorderStyle: =BorderStyle.None
Color: =RGBA(100, 116, 139, 1)
DisabledBorderColor: =RGBA(226, 232, 240, 1)
Fill: =RGBA(0, 0, 0, 0)
FocusedBorderColor: =RGBA(0, 0, 0, 0)
FocusedBorderThickness: =0
Font: =Font.'Open Sans'
FontWeight: =FontWeight.Semibold
HoverBorderColor: =RGBA(0, 0, 0, 0)
HoverColor: =RGBA(15, 23, 42, 1)
HoverFill: =RGBA(0, 0, 0, 0)
OnSelect: =If(varDataTableSortColumn = "status", Set(varDataTableSortAsc, !Coalesce(varDataTableSortAsc, true)), Set(varDataTableSortColumn, "status"); Set(varDataTableSortAsc, true))
PressedBorderColor: =RGBA(0, 0, 0, 0)
PressedFill: =RGBA(0, 0, 0, 0)
Size: =10
Text: ="Status" & If(varDataTableSortColumn = "status", If(Coalesce(varDataTableSortAsc, true), " ▲", " ▼"), "")
Height: =32
Width: =Parent.Width
X: =0
Y: =0
- conHeaderEmailWrap:
Control: GroupContainer@1.5.0
Variant: ManualLayout
Properties:
AlignInContainer: =AlignInContainer.Center
FillPortions: =0
DropShadow: =DropShadow.None
Fill: =RGBA(0, 0, 0, 0)
Visible: =Coalesce(varDataTableShowEmail, true)
Height: =32
Width: =200
Children:
- btnDataTableSortEmail:
Control: Classic/Button@2.2.0
Properties:
Align: =Align.Left
BorderColor: =RGBA(0, 0, 0, 0)
BorderStyle: =BorderStyle.None
Color: =RGBA(100, 116, 139, 1)
DisabledBorderColor: =RGBA(226, 232, 240, 1)
Fill: =RGBA(0, 0, 0, 0)
FocusedBorderColor: =RGBA(0, 0, 0, 0)
FocusedBorderThickness: =0
Font: =Font.'Open Sans'
FontWeight: =FontWeight.Semibold
HoverBorderColor: =RGBA(0, 0, 0, 0)
HoverColor: =RGBA(15, 23, 42, 1)
HoverFill: =RGBA(0, 0, 0, 0)
OnSelect: =If(varDataTableSortColumn = "email", Set(varDataTableSortAsc, !Coalesce(varDataTableSortAsc, true)), Set(varDataTableSortColumn, "email"); Set(varDataTableSortAsc, true))
PressedBorderColor: =RGBA(0, 0, 0, 0)
PressedFill: =RGBA(0, 0, 0, 0)
Size: =10
Text: ="Email" & If(varDataTableSortColumn = "email", If(Coalesce(varDataTableSortAsc, true), " ▲", " ▼"), "")
Height: =32
Width: =Parent.Width
X: =0
Y: =0
- conHeaderAmountWrap:
Control: GroupContainer@1.5.0
Variant: ManualLayout
Properties:
AlignInContainer: =AlignInContainer.Center
FillPortions: =0
DropShadow: =DropShadow.None
Fill: =RGBA(0, 0, 0, 0)
Visible: =Coalesce(varDataTableShowAmount, true)
Height: =32
Width: =80
Children:
- btnDataTableSortAmount:
Control: Classic/Button@2.2.0
Properties:
Align: =Align.Right
BorderColor: =RGBA(0, 0, 0, 0)
BorderStyle: =BorderStyle.None
Color: =RGBA(100, 116, 139, 1)
DisabledBorderColor: =RGBA(226, 232, 240, 1)
Fill: =RGBA(0, 0, 0, 0)
FocusedBorderColor: =RGBA(0, 0, 0, 0)
FocusedBorderThickness: =0
Font: =Font.'Open Sans'
FontWeight: =FontWeight.Semibold
HoverBorderColor: =RGBA(0, 0, 0, 0)
HoverColor: =RGBA(15, 23, 42, 1)
HoverFill: =RGBA(0, 0, 0, 0)
OnSelect: =If(varDataTableSortColumn = "amount", Set(varDataTableSortAsc, !Coalesce(varDataTableSortAsc, true)), Set(varDataTableSortColumn, "amount"); Set(varDataTableSortAsc, true))
PressedBorderColor: =RGBA(0, 0, 0, 0)
PressedFill: =RGBA(0, 0, 0, 0)
Size: =10
Text: ="Amount" & If(varDataTableSortColumn = "amount", If(Coalesce(varDataTableSortAsc, true), " ▲", " ▼"), "")
Height: =32
Width: =Parent.Width
X: =0
Y: =0
- conHeaderSpacer:
Control: GroupContainer@1.5.0
Variant: ManualLayout
Properties:
AlignInContainer: =AlignInContainer.Stretch
FillPortions: =1
LayoutMinWidth: =0
DropShadow: =DropShadow.None
Fill: =RGBA(0, 0, 0, 0)
Height: =32
- lblDataTableActionsHeader:
Control: Label@2.5.1
Properties:
AlignInContainer: =AlignInContainer.Center
FillPortions: =0
Align: =Align.Right
Color: =RGBA(100, 116, 139, 1)
Font: =Font.'Open Sans'
FontWeight: =FontWeight.Semibold
Size: =10
Text: ="Actions"
VerticalAlign: =VerticalAlign.Middle
Height: =32
Width: =165
- galDataTableRows:
Control: Gallery@2.15.0
Variant: Vertical
Properties:
DelayItemLoading: =false
Fill: =RGBA(255, 255, 255, 1)
Height: =Self.AllItemsCount * 44
Items: '=With({_f: Filter(galDataTableSource.AllItems, IsBlank(varDataTableSearch) || varDataTableSearch in Email || varDataTableSearch in Status)}, With({_s: If(IsBlank(varDataTableSortColumn), _f, Sort(_f, Switch(varDataTableSortColumn, "status", Status, "email", Email, "amount", Amount), If(Coalesce(varDataTableSortAsc, true), SortOrder.Ascending, SortOrder.Descending)))}, FirstN(LastN(_s, CountRows(_s) - (Coalesce(varDataTablePage, 1) - 1) * 5), 5)))'
ShowScrollbar: =false
TemplatePadding: =0
TemplateSize: =44
Width: =616
X: =12
Y: =96
Children:
- conDataTableRow:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
DropShadow: =DropShadow.None
LayoutDirection: =LayoutDirection.Horizontal
LayoutJustifyContent: =LayoutJustifyContent.Start
LayoutAlignItems: =LayoutAlignItems.Center
LayoutGap: =8
LayoutWrap: =false
PaddingLeft: =2
PaddingRight: =5
Height: =44
Width: =616
X: =0
Y: =0
Children:
- chkDataTableRowSelect:
Control: Classic/Button@2.2.0
Properties:
AlignInContainer: =AlignInContainer.Center
FillPortions: =0
Align: =Align.Center
BorderColor: =RGBA(203, 213, 225, 1)
BorderStyle: =BorderStyle.Solid
BorderThickness: =1
Color: =RGBA(255, 255, 255, 1)
DisabledBorderColor: =RGBA(226, 232, 240, 1)
Fill: =If(CountRows(Filter(colDataTableSelected, Id = ThisItem.Id)) > 0, RGBA(15, 23, 42, 1), RGBA(255, 255, 255, 1))
FocusedBorderColor: =RGBA(203, 213, 225, 1)
FocusedBorderThickness: =1
Font: =Font.'Open Sans'
HoverBorderColor: =RGBA(148, 163, 184, 1)
HoverColor: =RGBA(255, 255, 255, 1)
HoverFill: =RGBA(51, 65, 85, 1)
OnSelect: '=If(CountRows(Filter(colDataTableSelected, Id = ThisItem.Id)) > 0, Remove(colDataTableSelected, Filter(colDataTableSelected, Id = ThisItem.Id)), Collect(colDataTableSelected, {Id: ThisItem.Id}))'
PressedBorderColor: =RGBA(148, 163, 184, 1)
PressedFill: =RGBA(30, 41, 59, 1)
RadiusBottomLeft: =4
RadiusBottomRight: =4
RadiusTopLeft: =4
RadiusTopRight: =4
Size: =9
Text: =If(CountRows(Filter(colDataTableSelected, Id = ThisItem.Id)) > 0, "✓", "")
Height: =20
Width: =20
- conRowStatusWrap:
Control: GroupContainer@1.5.0
Variant: ManualLayout
Properties:
AlignInContainer: =AlignInContainer.Center
FillPortions: =0
DropShadow: =DropShadow.None
Fill: =RGBA(0, 0, 0, 0)
Visible: =Coalesce(varDataTableShowStatus, true)
Height: =44
Width: =90
Children:
- lblDataTableRowStatus:
Control: Label@2.5.1
Properties:
Align: =Align.Left
Color: =Switch(Lower(ThisItem.Status), "success", RGBA(22, 163, 74, 1), "processing", RGBA(202, 138, 4, 1), "failed", RGBA(220, 38, 38, 1), RGBA(100, 116, 139, 1))
Font: =Font.'Open Sans'
FontWeight: =FontWeight.Semibold
Size: =10
Text: =ThisItem.Status
VerticalAlign: =VerticalAlign.Middle
Height: =44
Width: =Parent.Width
X: =0
Y: =0
- conRowEmailWrap:
Control: GroupContainer@1.5.0
Variant: ManualLayout
Properties:
AlignInContainer: =AlignInContainer.Center
FillPortions: =0
DropShadow: =DropShadow.None
Fill: =RGBA(0, 0, 0, 0)
Visible: =Coalesce(varDataTableShowEmail, true)
Height: =44
Width: =200
Children:
- lblDataTableRowEmail:
Control: Label@2.5.1
Properties:
Align: =Align.Left
Color: =RGBA(51, 65, 85, 1)
Font: =Font.'Open Sans'
Size: =10
Text: =ThisItem.Email
VerticalAlign: =VerticalAlign.Middle
Height: =44
Width: =Parent.Width
X: =0
Y: =0
- conRowAmountWrap:
Control: GroupContainer@1.5.0
Variant: ManualLayout
Properties:
AlignInContainer: =AlignInContainer.Center
FillPortions: =0
DropShadow: =DropShadow.None
Fill: =RGBA(0, 0, 0, 0)
Visible: =Coalesce(varDataTableShowAmount, true)
Height: =44
Width: =80
Children:
- lblDataTableRowAmount:
Control: Label@2.5.1
Properties:
Align: =Align.Right
Color: =RGBA(15, 23, 42, 1)
Font: =Font.'Open Sans'
Size: =10
Text: ="$" & Text(ThisItem.Amount, "#,##0.00")
VerticalAlign: =VerticalAlign.Middle
Height: =44
Width: =Parent.Width
X: =0
Y: =0
- conRowSpacer:
Control: GroupContainer@1.5.0
Variant: ManualLayout
Properties:
AlignInContainer: =AlignInContainer.Stretch
FillPortions: =1
LayoutMinWidth: =0
DropShadow: =DropShadow.None
Fill: =RGBA(0, 0, 0, 0)
Height: =44
- btnDataTableRowView:
Control: Classic/Button@2.2.0
Properties:
AlignInContainer: =AlignInContainer.Center
FillPortions: =0
Align: =Align.Center
BorderColor: =RGBA(226, 232, 240, 1)
BorderStyle: =BorderStyle.Solid
BorderThickness: =1
Color: =RGBA(51, 65, 85, 1)
DisabledBorderColor: =RGBA(226, 232, 240, 1)
Fill: =RGBA(255, 255, 255, 1)
FocusedBorderColor: =RGBA(226, 232, 240, 1)
FocusedBorderThickness: =1
Font: =Font.'Open Sans'
HoverBorderColor: =RGBA(203, 213, 225, 1)
HoverColor: =RGBA(51, 65, 85, 1)
HoverFill: =RGBA(248, 250, 252, 1)
OnSelect: =Set(varDataTableViewingId, ThisItem.Id)
PressedBorderColor: =RGBA(203, 213, 225, 1)
PressedFill: =RGBA(241, 245, 249, 1)
RadiusBottomLeft: =4
RadiusBottomRight: =4
RadiusTopLeft: =4
RadiusTopRight: =4
Size: =9
Text: ="View"
Height: =32
Width: =50
- btnDataTableRowDelete:
Control: Classic/Button@2.2.0
Properties:
AlignInContainer: =AlignInContainer.Center
FillPortions: =0
Align: =Align.Center
BorderColor: =RGBA(254, 202, 202, 1)
BorderStyle: =BorderStyle.Solid
BorderThickness: =1
Color: =RGBA(220, 38, 38, 1)
DisabledBorderColor: =RGBA(226, 232, 240, 1)
Fill: =RGBA(255, 255, 255, 1)
FocusedBorderColor: =RGBA(254, 202, 202, 1)
FocusedBorderThickness: =1
Font: =Font.'Open Sans'
HoverBorderColor: =RGBA(252, 165, 165, 1)
HoverColor: =RGBA(185, 28, 28, 1)
HoverFill: =RGBA(254, 242, 242, 1)
OnSelect: '=Remove(colDataTableSelected, Filter(colDataTableSelected, Id = ThisItem.Id)); Notify("Row " & ThisItem.Id & " marked for deletion — wire this button to your real data source''s Remove()/Patch() call once connected.", NotificationType.Warning)'
PressedBorderColor: =RGBA(252, 165, 165, 1)
PressedFill: =RGBA(254, 226, 226, 1)
RadiusBottomLeft: =4
RadiusBottomRight: =4
RadiusTopLeft: =4
RadiusTopRight: =4
Size: =9
Text: ="Delete"
Height: =32
Width: =52
- lblDataTableEmpty:
Control: Label@2.5.1
Properties:
Align: =Align.Center
Color: =RGBA(148, 163, 184, 1)
Font: =Font.'Open Sans'
Size: =10
Text: ="No results."
VerticalAlign: =VerticalAlign.Middle
Visible: =CountRows(galDataTableRows.AllItems) = 0
Height: =44
Width: =616
X: =12
Y: =96
- lblDataTableSelectionCount:
Control: Label@2.5.1
Properties:
Align: =Align.Left
Color: =RGBA(100, 116, 139, 1)
Font: =Font.'Open Sans'
Size: =9
Text: =CountRows(colDataTableSelected) & " of " & CountRows(Filter(galDataTableSource.AllItems, IsBlank(varDataTableSearch) || varDataTableSearch in Email || varDataTableSearch in Status)) & " row(s) selected."
VerticalAlign: =VerticalAlign.Middle
Height: =40
Width: =260
X: =12
Y: =332
- lblDataTablePageInfo:
Control: Label@2.5.1
Properties:
Align: =Align.Left
Color: =RGBA(100, 116, 139, 1)
Font: =Font.'Open Sans'
Size: =9
Text: ="Page " & Coalesce(varDataTablePage, 1) & " of " & Max(1, RoundUp(CountRows(Filter(galDataTableSource.AllItems, IsBlank(varDataTableSearch) || varDataTableSearch in Email || varDataTableSearch in Status)) / 5, 0))
VerticalAlign: =VerticalAlign.Middle
Height: =40
Width: =90
X: =380
Y: =332
- btnDataTablePrev:
Control: Classic/Button@2.2.0
Properties:
Align: =Align.Center
BorderColor: =RGBA(226, 232, 240, 1)
BorderStyle: =BorderStyle.Solid
BorderThickness: =1
Color: =RGBA(51, 65, 85, 1)
DisabledBorderColor: =RGBA(226, 232, 240, 1)
DisabledColor: =RGBA(203, 213, 225, 1)
DisabledFill: =RGBA(248, 250, 252, 1)
DisplayMode: =If(Coalesce(varDataTablePage, 1) <= 1, DisplayMode.Disabled, DisplayMode.Edit)
Fill: =RGBA(255, 255, 255, 1)
FocusedBorderColor: =RGBA(226, 232, 240, 1)
FocusedBorderThickness: =1
Font: =Font.'Open Sans'
HoverBorderColor: =RGBA(203, 213, 225, 1)
HoverColor: =RGBA(51, 65, 85, 1)
HoverFill: =RGBA(248, 250, 252, 1)
OnSelect: =Set(varDataTablePage, Max(1, Coalesce(varDataTablePage, 1) - 1))
PressedBorderColor: =RGBA(203, 213, 225, 1)
PressedFill: =RGBA(241, 245, 249, 1)
RadiusBottomLeft: =6
RadiusBottomRight: =6
RadiusTopLeft: =6
RadiusTopRight: =6
Size: =9
Text: ="Previous"
Height: =36
Width: =68
X: =476
Y: =332
- btnDataTableNext:
Control: Classic/Button@2.2.0
Properties:
Align: =Align.Center
BorderColor: =RGBA(226, 232, 240, 1)
BorderStyle: =BorderStyle.Solid
BorderThickness: =1
Color: =RGBA(51, 65, 85, 1)
DisabledBorderColor: =RGBA(226, 232, 240, 1)
DisabledColor: =RGBA(203, 213, 225, 1)
DisabledFill: =RGBA(248, 250, 252, 1)
DisplayMode: =If(Coalesce(varDataTablePage, 1) >= Max(1, RoundUp(CountRows(Filter(galDataTableSource.AllItems, IsBlank(varDataTableSearch) || varDataTableSearch in Email || varDataTableSearch in Status)) / 5, 0)), DisplayMode.Disabled, DisplayMode.Edit)
Fill: =RGBA(255, 255, 255, 1)
FocusedBorderColor: =RGBA(226, 232, 240, 1)
FocusedBorderThickness: =1
Font: =Font.'Open Sans'
HoverBorderColor: =RGBA(203, 213, 225, 1)
HoverColor: =RGBA(51, 65, 85, 1)
HoverFill: =RGBA(248, 250, 252, 1)
OnSelect: =Set(varDataTablePage, Min(Max(1, RoundUp(CountRows(Filter(galDataTableSource.AllItems, IsBlank(varDataTableSearch) || varDataTableSearch in Email || varDataTableSearch in Status)) / 5, 0)), Coalesce(varDataTablePage, 1) + 1))
PressedBorderColor: =RGBA(203, 213, 225, 1)
PressedFill: =RGBA(241, 245, 249, 1)
RadiusBottomLeft: =6
RadiusBottomRight: =6
RadiusTopLeft: =6
RadiusTopRight: =6
Size: =9
Text: ="Next"
Height: =36
Width: =68
X: =548
Y: =332
- conDataTableColumnsPanel:
Control: GroupContainer@1.5.0
Variant: ManualLayout
Properties:
BorderColor: =RGBA(226, 232, 240, 1)
BorderThickness: =1
DropShadow: =DropShadow.Bold
Fill: =RGBA(255, 255, 255, 1)
Height: =132
RadiusBottomLeft: =8
RadiusBottomRight: =8
RadiusTopLeft: =8
RadiusTopRight: =8
Visible: =varDataTableColumnsOpen
Width: =160
X: =512
Y: =76
Children:
- btnDataTableToggleStatus:
Control: Classic/Button@2.2.0
Properties:
Align: =Align.Left
BorderColor: =RGBA(0, 0, 0, 0)
BorderStyle: =BorderStyle.None
Color: =RGBA(51, 65, 85, 1)
DisabledBorderColor: =RGBA(226, 232, 240, 1)
Fill: =RGBA(255, 255, 255, 1)
FocusedBorderColor: =RGBA(0, 0, 0, 0)
FocusedBorderThickness: =0
Font: =Font.'Open Sans'
HoverBorderColor: =RGBA(0, 0, 0, 0)
HoverColor: =RGBA(51, 65, 85, 1)
HoverFill: =RGBA(241, 245, 249, 1)
OnSelect: =Set(varDataTableShowStatus, !Coalesce(varDataTableShowStatus, true))
PaddingLeft: =12
PressedBorderColor: =RGBA(0, 0, 0, 0)
PressedFill: =RGBA(226, 232, 240, 1)
Size: =10
Text: =If(Coalesce(varDataTableShowStatus, true), "✓ ", "") & "Status"
VerticalAlign: =VerticalAlign.Middle
Height: =36
Width: =160
X: =0
Y: =8
- btnDataTableToggleEmail:
Control: Classic/Button@2.2.0
Properties:
Align: =Align.Left
BorderColor: =RGBA(0, 0, 0, 0)
BorderStyle: =BorderStyle.None
Color: =RGBA(51, 65, 85, 1)
DisabledBorderColor: =RGBA(226, 232, 240, 1)
Fill: =RGBA(255, 255, 255, 1)
FocusedBorderColor: =RGBA(0, 0, 0, 0)
FocusedBorderThickness: =0
Font: =Font.'Open Sans'
HoverBorderColor: =RGBA(0, 0, 0, 0)
HoverColor: =RGBA(51, 65, 85, 1)
HoverFill: =RGBA(241, 245, 249, 1)
OnSelect: =Set(varDataTableShowEmail, !Coalesce(varDataTableShowEmail, true))
PaddingLeft: =12
PressedBorderColor: =RGBA(0, 0, 0, 0)
PressedFill: =RGBA(226, 232, 240, 1)
Size: =10
Text: =If(Coalesce(varDataTableShowEmail, true), "✓ ", "") & "Email"
VerticalAlign: =VerticalAlign.Middle
Height: =36
Width: =160
X: =0
Y: =44
- btnDataTableToggleAmount:
Control: Classic/Button@2.2.0
Properties:
Align: =Align.Left
BorderColor: =RGBA(0, 0, 0, 0)
BorderStyle: =BorderStyle.None
Color: =RGBA(51, 65, 85, 1)
DisabledBorderColor: =RGBA(226, 232, 240, 1)
Fill: =RGBA(255, 255, 255, 1)
FocusedBorderColor: =RGBA(0, 0, 0, 0)
FocusedBorderThickness: =0
Font: =Font.'Open Sans'
HoverBorderColor: =RGBA(0, 0, 0, 0)
HoverColor: =RGBA(51, 65, 85, 1)
HoverFill: =RGBA(241, 245, 249, 1)
OnSelect: =Set(varDataTableShowAmount, !Coalesce(varDataTableShowAmount, true))
PaddingLeft: =12
PressedBorderColor: =RGBA(0, 0, 0, 0)
PressedFill: =RGBA(226, 232, 240, 1)
Size: =10
Text: =If(Coalesce(varDataTableShowAmount, true), "✓ ", "") & "Amount"
VerticalAlign: =VerticalAlign.Middle
Height: =36
Width: =160
X: =0
Y: =80Implementation
Copies the customized component code directly to your clipboard. Use Ctrl+V in Power Apps Studio.
Something not pasting right? Troubleshooting guide