Nitrogen Poisonous Monoxide

    TypeScript icon, indicating that this package has built-in type declarations

    1.1.0 • Public • Published


    Displays Sort components in a dropdown that can be styled as desired.

    <div class="CoveoCustomSortDropdown" data-display-caption="true" data-caption="Sort by:">
        <span class="CoveoSort" data-sort-criteria="relevancy" data-caption="Relevance"></span>
        <span class="CoveoSort" data-sort-criteria="date descending" data-caption="Newest"></span>
        <span class="CoveoSort" data-sort-criteria="date ascending" data-caption="Oldest"></span>


    Disclaimer: This component was built by the community at large and is not an official Coveo JSUI Component. Use this component at your own risk.


    header (optional) : string

    Specifies the header of the component

    Example: data-header='Sort'

    Default value is Sort.

    description (optional) : string

    Specifies the description of the component

    Example: data-description='Use this component to sort your results.'

    Default value is Your results will populate after a selection is made from the dropdown below..

    caption (optional) : string

    Specifies the title caption of the component

    Example: data-caption='Sort:'

    Default value is Sort By:.

    displayHeader (optional) : boolean

    Whether to display the header.

    Default value is false.

    Example: data-display-header='true'

    displayDescription (optional) : boolean

    Whether to display the description.

    Default value is false.

    Example: data-display-description='true'

    displayCaption (optional) : boolean

    Whether to display the caption.

    Default value is false.

    Example: data-display-caption='true'

    displayAsSelect (optional) : boolean

    Whether to display component as a good old HTML Select element.

    Default value is false.

    Example: data-display-as-select='true'

    Getting Started

    1. Install the component into your project.
    npm i @coveops/sort-dropdown
    1. Use the Component or extend it


    import { CustomSortDropdown, ICustomSortDropdownOptions } from '@coveops/sort-dropdown';


    const CustomSortDropdown = require('@coveops/sort-dropdown').CustomSortDropdown;
    1. You can also expose the component alongside other components being built in your project.
    export * from '@coveops/sort-dropdown'
    1. Or for quick testing, you can add the script from unpkg
    <script src=""></script>

    Disclaimer: Unpkg should be used for testing but not for production.

    1. Include the component in your template as follows:
    <div class="CoveoCustomSortDropdown"></div>


    Extending the component can be done as follows:

    import { CustomSortDropdown, ICustomSortDropdownOptions } from "@coveops/sort-dropdown";
    export interface IExtendedCustomSortDropdownOptions extends ICustomSortDropdownOptions {}
    export class ExtendedCustomSortDropdown extends CustomSortDropdown {}


    1. Clone the project
    2. Copy .env.dist to .env and update the COVEO_ORG_ID and COVEO_TOKEN fields in the .env file to use your Coveo credentials and SERVER_PORT to configure the port of the sandbox - it will use 8080 by default.
    3. Build the code base: npm run build
    4. Serve the sandbox for live development npm run serve


    6 Juli 2021 - Fixed State change




    npm i @coveops/sort-dropdown

    DownloadsWeekly Downloads






    Unpacked Size

    58.3 kB

    Total Files


    Last publish


    • ehsanshahneh
    • dsisodraker
    • watallah
    • coveoit
    • gfoumbi
    • rvundavalli
    • jwolfe-coveo
    • sfecteau
    • mthusscoveo
    • jfleurent
    • eqcoveo
    • jmdro
    • davebouffard
    • jfallaire
    • achouan
    • hsinghcoveo
    • wnijmeijer
    • lgcarrierbedard
    • elafleur_coveo
    • plavigueur
    • eaubin
    • lpblais-coveo
    • jpdery26
    • cricha