What's the technique for displaying a distinct value (label) in the filter dropdown as opposed to in the column itself?

Is there a way to display different values in a dropdown filter for a factor column in a DataTable? I would like to have HTML rendering within the column, but show a different label when filtering. I tried using factor labels without success. I plan to use this table in a Shiny app and am open to using CSS or JS modifications to achieve this.

In this example, the text in the table is bolded - ideally, only the values themselves should appear in the filtering dropdown, without the HTML tags. Is there a solution for this?

library(dplyr)

DT::datatable(
  iris %>%
    mutate(Species = factor(Species, levels = unique(.$Species),
                            labels = paste0('<strong>', unique(.$Species), '</strong>'))),
  escape = FALSE,
  filter = 'top')

Here's an image showcasing the desired outcome - removing the HTML tags from the filter options: https://i.sstatic.net/V04DWEVt.png

htmlcssrdt

Answer №1

Utilizing the columnwise option render allows for altering the cell display without modifying their values.

https://i.sstatic.net/f5XMPIt6.gif

library(DT)
library(fontawesome)


dat <- iris

js <- c(
    "function (data, type, row, meta) {",
    "  if(type === 'display') {",
    "    var icon;",
    "    if(data === 'setosa') {",
    sprintf("icon = '%s'", as.character(fa_i("cat"))),
    "    } else if(data === 'versicolor') {",
    sprintf("icon = '%s'", as.character(fa_i("dog"))),
    "    } else if(data === 'virginica') {",
    sprintf("icon = '%s'", as.character(fa_i("fish"))),
    "    }",
    "    return '<em>' + '&nbsp;' + icon + data + '</em>';",
    "  } else {",
    "    return data;",
    "  }",
    "}"
)

dtable <- datatable(
    dat,
    rownames = TRUE,
    filter = "top",
    options = 
        list(
            columnDefs =
                list(
                    list(
                        targets = list(5),
                        render = JS(js)
                    )
                )
        )
    )

deps <- dtable$dependencies
deps <- c(deps, list(fa_html_dependency()))
dtable$dependencies <- deps
dtable

When used in a Shiny app, the final step is not required:

deps <- dtable$dependencies
deps <- c(deps, list(fa_html_dependency()))
dtable$dependencies <- deps

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The $watch() function seems to be failing to properly refresh the $scope

Within my controller, I have a function $scope.remove() that triggers a request to the usercart, which then calls an API. The JSON response from the API includes an object with an array of cart items. Despite using an ng-repeat in the HTML to iterate thro ...

javascripthtmlangularjsangularjs-service

Why is SVG not adjusting to the screen size properly?

How can I make an SVG fit to its parent <div>-container and resize with the screen size? My initial plan involved controlling the size of the SVG based on the percental width and height of the parent <div>-container. Looking for any suggestio ...

htmlcsssvg

Altering the Size of Text in HTML

Currently I am working on my website and the title appears as follows <h1><font face="tempus sans itc" color="White"><div style="text-align:center">Welcome To My Website. View My Projects Here</h1></div> Is there a way to in ...

html

Django was unable to load the static image

Currently, my Django application is hosted on PythonAnywhere. In order to generate a PDF, I am utilizing WeasyPrint which includes an image that should be displayed in the PDF. However, within the error log, I am encountering the message "Failed to load im ...

htmldjangodjango-staticfilespythonanywhere

Adding a stylish underline to text using HTML and CSS

Looking for some assistance with my Html and CSS website project. I am currently facing a challenge trying to place a border below the text as shown in the provided image. Below is the snippet of my Html code: <div class="Sectionheading"> ...

htmlcss

Understanding the Code for Responsive Web Typography with line-height in ems

I am currently trying to delve into the CSS calculation process behind the styling in the code snippet provided. This code snippet is from a responsive WordPress theme, and I am struggling to decipher how the em values for the line-height of the <h> ...

webtypographycss

Execute a zoom out action by pressing the (Ctrl) and (-) keys simultaneously in Javascript

I'm trying to figure out how to simulate a Ctrl - zoom out using Javascript. I've noticed that using the style zoom property or the transform property gives different results with white space in the corners, rather than the smooth zoom out effect ...

javascriptjqueryhtmlcss

Tips for pausing keyframes animation on its final animation frame

Is there a way to halt my animation at the 100% keyframe? What I'm attempting to accomplish is animating these boxes so that when you click on the top one, it moves to the bottom and vice versa. Any suggestions or ideas on how to achieve this? <h ...

javascriptjqueryhtmlcssanimation

Elements in Internet Explorer become unresponsive after being hidden or shown using jQuery

One issue I'm encountering is with a group of tabbed divs that I'm using jQuery hide() and show() to toggle the visibility. This method functions perfectly in most browsers, but unfortunately in Internet Explorer (IE), the hidden tabs become unre ...

jqueryhtmlcssinternet-explorer

CSS to Vertically Display Input Values

Having an input field with type=number in a React application styled using styled-components, I am looking to have certain inputs display their values vertically. export const UnitValue = styled.input` ::-webkit-inner-spin-button, ::-webkit-outer-spin ...

javascripthtmlcssreactjs

What steps can I take to stop my html table from expanding beyond its intended size

There are instances where the length of a data piece in one of my table cells causes it to expand and distort the overall layout of the table. Is there a way to avoid this from happening? ...

htmlcss

Is it possible to deactivate the onclick event following a successful ajax request?

I am looking to disable the onclick event after a successful ajax request. <div class="report_button" id="report_button" title="Reportthis" style="width:65px;height:15px;" onclick="reported_text(user_id,lead_id);">Report</div> This is the div ...

javascriptjqueryhtmlcssajax

Guide on making a dynamic table with HTML and CSS featuring square cells

Looking to design an 8x8 table using HTML and CSS, with the first column and row functioning as headers (ideally with header row height equal to header column width), and all table body cells being square. Shown below is the current HTML and CSS code: < ...

htmlcsshtml-table

Enhance Bootstrap: adjust button width based on fluid text width

Incorporating Bootstrap 5 framework, I have designed a card that showcases brand information along with a navigation button on the right side. https://i.sstatic.net/25QVr.png When the description is brief, the button aligns perfectly in a single line. Ho ...

csstwitter-bootstrapflexboxbootstrap-5

Replace any missing values in a set of columns with NA if they do not exist in a different column

I am dealing with a dataset that contains some unreferenced data that I need to replace with NA. For example, if the values in columns rep1 to rep4 do not match any of the IDs listed in the ID column, they should be replaced with NA. In this scenario, valu ...

rnadplyr

I am facing an issue where PHP is failing to detect the '<del>' tag in my index.view.php file, resulting in it being omitted from the generated HTML

I've been working on updating my PHP code in the index.view.php file to display a strike through the task description if completed is set to true. I came across a Laracasts tutorial on classes where the instructor used <strike></strike>, w ...

phphtml

Creating a stylish Bootstrap 5 table featuring a large PRE block in a cell that is scrollable

I am currently working on formatting a table and I need some help figuring out how to achieve my desired layout. The issue I'm facing is with a cell that contains a large JSON object block. I want this block to either wrap within the enclosing TD, or ...

htmlcsstwitter-bootstrapbootstrap-5

What techniques does DeviantArt use to adapt and adjust the content displayed on a page based on the width of the user's

Visit and observe the functionality where new content appears as you widen your browser window. The alignment of the content in the center is a key aspect of this design on DeviantArt's website. How is this achieved? I attempted to create a div with ...

jquerycssajax

Is there a substitute for the /deep selector in CSS shadow dom?

It seems that the /deep selector is no longer an option for selecting shadow DOM children, so I'm in search of an alternative solution. CSS scoping offers solutions for ascending selectors, but not for descending ones. Considering this DOM structure ...

cssshadow-dom

What could be causing my insertRow function to inject empty cells into my table?

I am facing an issue with adding the results of a fetch request into a table as a new row. Strangely, when I click the button to trigger this function for the first time, it adds an empty row instead of the desired data. However, on subsequent clicks, the ...

javascripthtml