<\/div><\/div>'; } \")) df <- data.frame(task = c(\"A\", \"B\", \"C\"), done = c(75, 40, 95)) opts <- list(columns = names(df)) opts <- dt2_use_renderer(opts, \"done\", \"pct_bar\") dt2(df, options = opts)"},{"path":"https://strategicprojects.github.io/DT2/articles/getting-started.html","id":"overview","dir":"Articles","previous_headings":"","what":"Overview","title":"Getting Started with DT2","text":"DT2 modern R binding DataTables v2 built htmlwidgets. works without Shiny — render interactive tables R Markdown, Quarto, RStudio Viewer. zero configuration, DT2 produces Bootstrap 5 styled table search, sorting, pagination, Jost font — single function call:","code":"# Just works — Bootstrap 5, Jost font, striped, compact dt2(iris)"},{"path":"https://strategicprojects.github.io/DT2/articles/getting-started.html","id":"responsive-tables","dir":"Articles","previous_headings":"","what":"Responsive Tables","title":"Getting Started with DT2","text":"DT2 enables Responsive extension default. Tables fill 100% available width gracefully adapt narrow screens collapsing columns don’t fit. essential dashboards reports viewed mobile devices embedded narrow layout containers: wide screens columns visible. narrow screens, columns overflow hidden accessible via toggle (+) row — user can expand row reveal hidden columns child row. disable responsive behaviour (example, using custom renderers inject complex HTML, prefer horizontal scrolling scrollX = TRUE):","code":"# Responsive is ON by default — table fills the container dt2(mtcars[1:10, ]) dt2(iris, responsive = FALSE)"},{"path":"https://strategicprojects.github.io/DT2/articles/getting-started.html","id":"styling","dir":"Articles","previous_headings":"","what":"Styling","title":"Getting Started with DT2","text":"DT2 provides multiple levels control table appearance, quick inline parameters reusable theme objects. styling options cascade: direct arguments override theme values, override built-defaults.","code":""},{"path":"https://strategicprojects.github.io/DT2/articles/getting-started.html","id":"inline-overrides","dir":"Articles","previous_headings":"Styling","what":"Inline overrides","title":"Getting Started with DT2","text":"Style parameters first-class arguments dt2(). Override individual setting without creating theme object — useful quick one-adjustments:","code":"dt2(iris, striped = FALSE, hover = FALSE, font_scale = 1.0)"},{"path":"https://strategicprojects.github.io/DT2/articles/getting-started.html","id":"theme-presets","dir":"Articles","previous_headings":"Styling","what":"Theme presets","title":"Getting Started with DT2","text":"DT2 ships four built-presets cover common use cases. preset adjusts striping, compactness, font scaling match particular aesthetic:","code":"dt2(iris, theme = \"minimal\", options = list(pageLength = 5))"},{"path":"https://strategicprojects.github.io/DT2/articles/getting-started.html","id":"reusable-themes","dir":"Articles","previous_headings":"Styling","what":"Reusable themes","title":"Getting Started with DT2","text":"Create theme , apply many tables:","code":"my_theme <- dt2_theme(\"clean\", compact = TRUE, font_scale = 0.80) my_theme #> DT2 theme: #> striped = TRUE #> hover = TRUE #> compact = TRUE #> font_scale = 0.8 #> style = bootstrap5 #> button_class = btn btn-sm btn-outline-secondary #> class =
dt2(iris[1:10, ], theme = my_theme)"},{"path":"https://strategicprojects.github.io/DT2/articles/getting-started.html","id":"css-class-override","dir":"Articles","previous_headings":"Styling","what":"CSS class override","title":"Getting Started with DT2","text":"full control, pass raw CSS class string:","code":"dt2(iris, class = \"table table-bordered table-dark table-sm\")"},{"path":"https://strategicprojects.github.io/DT2/articles/getting-started.html","id":"table-layout","dir":"Articles","previous_headings":"","what":"Table Layout","title":"Getting Started with DT2","text":"DataTables 2 uses layout control elements (search box, page length selector, buttons, pagination, info text) appear around table. replaces old dom string DataTables v1 clean, named-position system much easier read maintain. position slot grid table. can place element slot, combine multiple elements slot, set slot NULL remove entirely.","code":""},{"path":"https://strategicprojects.github.io/DT2/articles/getting-started.html","id":"layout-positions","dir":"Articles","previous_headings":"Table Layout","what":"Layout positions","title":"Getting Started with DT2","text":"","code":"+------------------+------------------+ | topStart | topEnd | +------------------+------------------+ | top2Start | top2End | +------------------+------------------+ | TABLE | +------------------+------------------+ | bottomStart | bottomEnd | +------------------+------------------+ | bottom2Start | bottom2End | +------------------+------------------+"},{"path":"https://strategicprojects.github.io/DT2/articles/getting-started.html","id":"default-layout","dir":"Articles","previous_headings":"Table Layout","what":"Default layout","title":"Getting Started with DT2","text":"default, DataTables places: topStart: page length selector topEnd: search box bottomStart: info (“Showing 1 10 150 entries”) bottomEnd: pagination","code":""},{"path":"https://strategicprojects.github.io/DT2/articles/getting-started.html","id":"rearranging-elements","dir":"Articles","previous_headings":"Table Layout","what":"Rearranging elements","title":"Getting Started with DT2","text":"Move search box left info right:","code":"dt2(iris, options = list( pageLength = 5, layout = list( topStart = \"search\", topEnd = \"pageLength\", bottomStart = \"paging\", bottomEnd = \"info\" ) ))"},{"path":"https://strategicprojects.github.io/DT2/articles/getting-started.html","id":"removing-elements","dir":"Articles","previous_headings":"Table Layout","what":"Removing elements","title":"Getting Started with DT2","text":"Set position NULL remove :","code":"dt2(iris, options = list( pageLength = 5, layout = list( topStart = NULL, # remove page length selector bottomEnd = \"paging\" # keep only pagination ) ))"},{"path":"https://strategicprojects.github.io/DT2/articles/getting-started.html","id":"multiple-elements-in-one-position","dir":"Articles","previous_headings":"Table Layout","what":"Multiple elements in one position","title":"Getting Started with DT2","text":"Wrap multiple elements list:","code":"dt2(iris, options = list( pageLength = 5, layout = list( topStart = list(\"pageLength\", \"info\"), topEnd = \"search\", bottomEnd = \"paging\" ) ))"},{"path":"https://strategicprojects.github.io/DT2/articles/getting-started.html","id":"search-box-placeholder","dir":"Articles","previous_headings":"Table Layout","what":"Search box placeholder","title":"Getting Started with DT2","text":"","code":"dt2(iris, options = list( pageLength = 5, layout = list( topEnd = list(search = list(placeholder = \"Type to filter...\")) ) ))"},{"path":"https://strategicprojects.github.io/DT2/articles/getting-started.html","id":"buttons-export-copy-print","dir":"Articles","previous_headings":"","what":"Buttons (Export / Copy / Print)","title":"Getting Started with DT2","text":"Buttons extension adds one-click export functionality tables. Users can copy data clipboard, download CSV/Excel/PDF, send table directly printer. DT2 auto-detects buttons configured loads required JavaScript CSS automatically — need specify extensions = \"Buttons\" manually.","code":""},{"path":"https://strategicprojects.github.io/DT2/articles/getting-started.html","id":"quick-setup","dir":"Articles","previous_headings":"Buttons (Export / Copy / Print)","what":"Quick setup","title":"Getting Started with DT2","text":"simplest way add export buttons — just list button types want place layout: DT2 auto-detects buttons needed loads Buttons extension.","code":"dt2(mtcars[1:15, ], options = list( pageLength = 8, buttons = list(\"copy\", \"csv\", \"excel\"), layout = list(topEnd = \"buttons\") ))"},{"path":"https://strategicprojects.github.io/DT2/articles/getting-started.html","id":"using-the-helper","dir":"Articles","previous_headings":"Buttons (Export / Copy / Print)","what":"Using the helper","title":"Getting Started with DT2","text":"dt2_use_buttons() builds options :","code":"opts <- dt2_use_buttons( buttons = c(\"copy\", \"csv\", \"excel\", \"pdf\", \"print\"), position = \"topEnd\" ) dt2(iris[1:20, ], options = opts)"},{"path":"https://strategicprojects.github.io/DT2/articles/getting-started.html","id":"buttons-search-together","dir":"Articles","previous_headings":"Buttons (Export / Copy / Print)","what":"Buttons + search together","title":"Getting Started with DT2","text":"Place buttons search row:","code":"dt2(iris[1:20, ], options = list( pageLength = 10, buttons = list(\"copy\", \"csv\", \"excel\"), layout = list( topStart = \"buttons\", topEnd = list(search = list(placeholder = \"Filter...\")), bottomEnd = \"paging\" ) ))"},{"path":"https://strategicprojects.github.io/DT2/articles/getting-started.html","id":"grouped-buttons-with-dropdown","dir":"Articles","previous_headings":"Buttons (Export / Copy / Print)","what":"Grouped buttons with dropdown","title":"Getting Started with DT2","text":"tables many export options, group related buttons inside dropdown menu using extend = \"collection\". keeps toolbar compact still offering export formats. colvis button lets users toggle column visibility fly:","code":"dt2(iris[1:20, ], options = list( pageLength = 10, layout = list( topEnd = list( buttons = list( list(extend = \"collection\", text = \"Export\", buttons = list(\"copyHtml5\", \"csvHtml5\", \"excelHtml5\", \"pdfHtml5\")), list(extend = \"spacer\", style = \"bar\"), \"print\", list(extend = \"spacer\", style = \"bar\"), list(extend = \"colvis\", text = \"Columns\") ) ) ) ))"},{"path":"https://strategicprojects.github.io/DT2/articles/getting-started.html","id":"separated-button-groups-with-spacer","dir":"Articles","previous_headings":"Buttons (Export / Copy / Print)","what":"Separated button groups with spacer","title":"Getting Started with DT2","text":"Use extend = \"spacer\" visually separate groups buttons. style = \"bar\" variant adds vertical divider:","code":"dt2(iris[1:20, ], options = list( pageLength = 10, layout = list( topEnd = list( buttons = list( \"copy\", \"csv\", \"excel\", list(extend = \"spacer\", style = \"bar\"), list(extend = \"colvis\", text = \"Columns\") ) ) ) ))"},{"path":"https://strategicprojects.github.io/DT2/articles/getting-started.html","id":"bottom-buttons","dir":"Articles","previous_headings":"Buttons (Export / Copy / Print)","what":"Bottom buttons","title":"Getting Started with DT2","text":"","code":"dt2(mtcars[1:10, ], options = list( buttons = list(\"copy\", \"csv\"), layout = list( topEnd = \"search\", bottomStart = \"buttons\", bottomEnd = \"paging\" ) ))"},{"path":"https://strategicprojects.github.io/DT2/articles/getting-started.html","id":"button-styling","dir":"Articles","previous_headings":"Buttons (Export / Copy / Print)","what":"Button styling","title":"Getting Started with DT2","text":"DT2 defaults compact, outlined buttons (btn btn-sm btn-outline-secondary). Override globally via button_class: per-table helper: can also set reusable theme: Common Bootstrap 5 button classes:","code":"# Primary blue buttons dt2(iris[1:10, ], button_class = \"btn btn-sm btn-primary\", options = list( buttons = list(\"copy\", \"csv\", \"excel\"), layout = list(topEnd = \"buttons\") )) opts <- dt2_use_buttons( buttons = c(\"copy\", \"csv\", \"excel\"), button_class = \"btn btn-sm btn-outline-dark\" ) dt2(iris[1:10, ], options = opts) my_theme <- dt2_theme(\"default\", button_class = \"btn btn-sm btn-primary\") dt2(iris, theme = my_theme, options = dt2_use_buttons()) dt2(mtcars, theme = my_theme, options = dt2_use_buttons())"},{"path":"https://strategicprojects.github.io/DT2/articles/getting-started.html","id":"pagination-styling","dir":"Articles","previous_headings":"Buttons (Export / Copy / Print)","what":"Pagination styling","title":"Getting Started with DT2","text":"DataTables v2 configures pagination layout option, using paging named list. replaces deprecated pagingType parameter gives fine-grained control navigation elements appear: page number buttons, previous/next arrows, first/last buttons, many page-number buttons show . default pagination includes previous/next arrows page numbers. DT2 uses Bootstrap 5 .page-link classes, pagination automatically inherits Bootswatch theme colours. remove pagination entirely (show rows ), set paging = FALSE root level options. useful small datasets user see everything without navigating: Simple — previous / next (page numbers). Useful mobile-friendly interfaces exact page numbers meaningful: Hide page numbers keep first / last buttons. Lets users jump beginning end large datasets without cluttering interface numbered buttons: Limit many page number buttons shown. datasets many pages prevents pagination bar becoming wide — DataTables inserts ellipsis (…) indicate hidden pages: Hide boundary numbers (first/last page) keep arrows. first last page numbers removed, leaving surrounding page numbers navigation arrows: Full — first / prev / numbers / next / last. Shows every navigation element maximum control. equivalent deprecated pagingType = \"full_numbers\":","code":"# Default pagination — compact, themed by Bootstrap dt2(iris) dt2(iris[1:10, ], options = list( paging = FALSE )) dt2(iris, options = list( layout = list( bottomEnd = list(paging = list( type = \"simple\" )) ) )) dt2(iris, options = list( layout = list( bottomEnd = list(paging = list( numbers = FALSE, firstLast = TRUE )) ) )) dt2(iris, options = list( layout = list( bottomEnd = list(paging = list( buttons = 3 )) ) )) dt2(iris, options = list( layout = list( bottomEnd = list(paging = list( boundaryNumbers = FALSE )) ) )) dt2(iris, options = list( layout = list( bottomEnd = list(paging = list( firstLast = TRUE, previousNext = TRUE, numbers = TRUE )) ) ))"},{"path":"https://strategicprojects.github.io/DT2/articles/getting-started.html","id":"quick-reference","dir":"Articles","previous_headings":"Buttons (Export / Copy / Print) > Pagination styling","what":"Quick reference","title":"Getting Started with DT2","text":"Note: pagingType (e.g. \"simple\", \"full_numbers\") still works deprecated DataTables v2. Prefer layout approach . Move pagination left. Sometimes makes sense swap info pagination — example, pagination controls align left-side content:","code":"dt2(iris, options = list( layout = list( bottomStart = \"paging\", bottomEnd = \"info\" ) ))"},{"path":"https://strategicprojects.github.io/DT2/articles/getting-started.html","id":"infinite-scrolling-scroller","dir":"Articles","previous_headings":"","what":"Infinite Scrolling (Scroller)","title":"Getting Started with DT2","text":"Instead pagination, can use virtual scrolling large datasets. Scroller extension renders visible rows loads user scrolls — ideal datasets thousands rows pagination create overwhelming number pages. table container gets fixed height (set via scrollY pixels) rows rendered demand user scrolls, keeping memory usage low even large datasets: DT2 auto-detects Scroller extension scroller = TRUE set. larger dataset: Combine buttons: datasets ~50k rows, consider server-side processing instead. See vignette(\"shiny-integration\") details.","code":"dt2(iris, options = list( scroller = TRUE, scrollY = 300, # viewport height in pixels paging = TRUE # required for Scroller )) big <- data.frame( id = 1:5000, value = round(rnorm(5000), 3), group = sample(LETTERS[1:5], 5000, replace = TRUE) ) dt2(big, options = list( scroller = TRUE, scrollY = 400, deferRender = TRUE # improves performance: renders rows on demand )) dt2(big, options = list( scroller = TRUE, scrollY = 350, deferRender = TRUE, buttons = list(\"copy\", \"csv\", \"excel\"), layout = list( topEnd = \"buttons\", topStart = list(search = list(placeholder = \"Search...\")) ) ))"},{"path":"https://strategicprojects.github.io/DT2/articles/getting-started.html","id":"column-formatting","dir":"Articles","previous_headings":"","what":"Column Formatting","title":"Getting Started with DT2","text":"DT2 provides helper functions build DataTables columnDefs common formatting tasks — number separators, decimal places, prefixes, suffixes. modify options list -place generate correct JavaScript render functions behind scenes, don’t need write JS: Note opts <- list(columns = names(mtcars)) line: name-based helpers resolve column names options$columns, set calling (pass 1-based indices). DT2 warns missing.","code":"opts <- list(columns = names(mtcars)) opts <- dt2_format_number(opts, \"hp\", thousands = \",\", digits = 0) opts <- dt2_format_number(opts, \"wt\", digits = 2, prefix_right = \" tons\") dt2(mtcars[1:10, ], options = opts)"},{"path":"https://strategicprojects.github.io/DT2/articles/getting-started.html","id":"abbreviated-numbers-kmb","dir":"Articles","previous_headings":"Column Formatting","what":"Abbreviated numbers (k/M/B)","title":"Getting Started with DT2","text":"large numbers (population, budgets, revenues), use abbreviated formatting automatically converts values human-readable suffixes. locale parameter controls decimal separator number grouping:","code":"df <- data.frame( city = c(\"São Paulo\", \"Recife\", \"NYC\", \"Tokyo\"), pop = c(12.33e6, 1.65e6, 8.34e6, 13.96e6), budget = c(6.5e10, 4.2e9, 1.07e11, 7.36e10) ) opts <- list(columns = names(df)) opts <- dt2_format_number_abbrev(opts, c(\"pop\", \"budget\"), digits = 1, locale = \"pt-BR\") dt2(df, options = opts)"},{"path":"https://strategicprojects.github.io/DT2/articles/getting-started.html","id":"datatables-options","dir":"Articles","previous_headings":"","what":"DataTables Options","title":"Getting Started with DT2","text":"Every option DataTables JS API maps 1:1 R named list. find example DataTables website, can translate directly R without wrapper functions. means full power DataTables available — including options covered DT2’s helper functions: See vignette(\"js-config\") complete translation guide.","code":"dt2(iris, options = list( pageLength = 5, searching = TRUE, ordering = TRUE, language = list(search = \"Filter:\", info = \"_TOTAL_ rows\") ))"},{"path":"https://strategicprojects.github.io/DT2/articles/getting-started.html","id":"saving-as-html","dir":"Articles","previous_headings":"","what":"Saving as HTML","title":"Getting Started with DT2","text":"DT2 table can saved standalone HTML file using htmlwidgets::saveWidget(). resulting file includes CSS JavaScript — works offline can emailed, hosted, embedded pages:","code":"w <- dt2(iris) htmlwidgets::saveWidget(w, \"my_table.html\", selfcontained = TRUE)"},{"path":"https://strategicprojects.github.io/DT2/articles/getting-started.html","id":"keeping-libraries-up-to-date","dir":"Articles","previous_headings":"","what":"Keeping Libraries Up to Date","title":"Getting Started with DT2","text":"DT2 bundles DataTables core, extensions, jQuery, JS/CSS dependencies inside package. can check whether newer versions available npm CDN without leaving R: developing DT2 , apply updates automatically: Version constraints prevent breaking upgrades (jQuery stays 3.x, pdfmake 0.2.x). See ?.dt2_version_constraints details.","code":"dt2_check_updates() dt2_update_libs() # patch + download dt2_update_libs(dry_run = TRUE) # preview only"},{"path":"https://strategicprojects.github.io/DT2/articles/getting-started.html","id":"complete-example-custom-renderers-flags-and-columncontrol","dir":"Articles","previous_headings":"","what":"Complete Example: Custom Renderers, Flags, and ColumnControl","title":"Getting Started with DT2","text":"example brings together DT2 features single, realistic table: ColumnControl dropdown menus header sorting filtering, export buttons separated visual spacer, custom JavaScript renderers (country flags via CSS sprites, coloured salary values, progress bars), complete Portuguese (Brazil) translation. Copy run directly — full 57-row version also available system.file(\"examples/app_complete.R\", package = \"DT2\").","code":"library(jsonlite) library(dplyr) library(tibble) library(lubridate) library(DT2) library(htmlwidgets) # ── Flag sprite CSS (carregado via dependency para garantir que entra no HTML) ── flag_dep <- htmltools::htmlDependency( name = \"world-flags-sprite\", version = \"0.0.1\", head = '', src = c(href = \".\") ) # ── Dados ───────────────────────────────────────────────────────────────────── json_txt <- '{ \"data\": [ {\"name\":\"Tiger Nixon\",\"position\":\"System Architect\",\"salary\":\"320800\",\"start_date\":\"2011-04-25\",\"office\":\"Edinburgh\",\"extn\":\"5421\"}, {\"name\":\"Garrett Winters\",\"position\":\"Accountant\",\"salary\":\"170750\",\"start_date\":\"2011-07-25\",\"office\":\"Tokyo\",\"extn\":\"8422\"}, {\"name\":\"Ashton Cox\",\"position\":\"Junior Technical Author\",\"salary\":\"86000\",\"start_date\":\"2009-01-12\",\"office\":\"San Francisco\",\"extn\":\"1562\"}, {\"name\":\"Cedric Kelly\",\"position\":\"Senior JavaScript Developer\",\"salary\":\"433060\",\"start_date\":\"2012-03-29\",\"office\":\"Edinburgh\",\"extn\":\"6224\"}, {\"name\":\"Airi Satou\",\"position\":\"Accountant\",\"salary\":\"162700\",\"start_date\":\"2008-11-28\",\"office\":\"Tokyo\",\"extn\":\"5407\"}, {\"name\":\"Brielle Williamson\",\"position\":\"Integration Specialist\",\"salary\":\"372000\",\"start_date\":\"2012-12-02\",\"office\":\"New York\",\"extn\":\"4804\"}, {\"name\":\"Herrod Chandler\",\"position\":\"Sales Assistant\",\"salary\":\"137500\",\"start_date\":\"2012-08-06\",\"office\":\"San Francisco\",\"extn\":\"9608\"}, {\"name\":\"Rhona Davidson\",\"position\":\"Integration Specialist\",\"salary\":\"327900\",\"start_date\":\"2010-10-14\",\"office\":\"Tokyo\",\"extn\":\"6200\"}, {\"name\":\"Colleen Hurst\",\"position\":\"JavaScript Developer\",\"salary\":\"205500\",\"start_date\":\"2009-09-15\",\"office\":\"San Francisco\",\"extn\":\"2360\"}, {\"name\":\"Sonya Frost\",\"position\":\"Software Engineer\",\"salary\":\"103600\",\"start_date\":\"2008-12-13\",\"office\":\"Edinburgh\",\"extn\":\"1667\"} ] }' df <- fromJSON(json_txt, flatten = TRUE)$data %>% as_tibble() %>% mutate( salary = as.numeric(salary), extn = as.integer(extn), start_date = ymd(start_date) ) # ── JS Renderers ────────────────────────────────────────────────────────────── office_js <- JS(\" function(data, type) { if (type !== 'display') return data; var cc = {Argentina:'ar', Edinburgh:'_Scotland', London:'_England', 'New York':'us', 'San Francisco':'us', Sydney:'au', Tokyo:'jp'}; return '<\/span> ' + data; } \") salary_js <- JS(\" (function() { var nfmt = DataTable.render.number('.', ',', 2, 'R$ '); return function(data, type) { var txt = nfmt.display(data); if (type !== 'display') return txt; var c = data < 250000 ? 'red' : data < 500000 ? 'orange' : 'green'; return '' + txt + '<\/span>'; }; })() \") extn_js <- JS(\" function(data, type) { return type === 'display' ? '