Here is the my xml file code.
<?xml version="1.0" encoding="UTF-8"?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<!--Declare data source, columns list, button...-->
<argument name="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="provider" xsi:type="string">hk_commercialSale_quote_grid.hk_commercialSale_grid_data_source</item>
<item name="deps" xsi:type="string">hk_commercialSale_quote_grid.hk_commercialSale_grid_data_source</item>
<!--Declare the data source name which will be defined below-->
</item>
<item name="spinner" xsi:type="string">hk_commercialSale_columns</item>
<!--Declare the listing of columns which will be defined below-->
<item name="buttons" xsi:type="array">
<item name="add" xsi:type="array">
<item name="name" xsi:type="string">add</item>
<item name="label" xsi:type="string" translate="true">Add New Quote</item>
<item name="class" xsi:type="string">primary</item>
<item name="url" xsi:type="string">commercialsale/index</item>
</item>
<!--The button on the top of the Grid-->
</item>
</argument>
<dataSource name="hk_commercialSale_grid_data_source">
<!--The data source-->
<argument name="dataProvider" xsi:type="configurableObject">
<argument name="class" xsi:type="string">Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider</argument>
<argument name="name" xsi:type="string">hk_commercialSale_grid_data_source</argument>
<argument name="primaryFieldName" xsi:type="string">hk_quote_id</argument>
<argument name="requestFieldName" xsi:type="string">id</argument>
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/grid/provider</item>
<item name="update_url" xsi:type="url" path="mui/index/render"/>
<item name="storageConfig" xsi:type="array">
<item name="indexField" xsi:type="string">hk_quote_id</item>
</item>
</item>
</argument>
</argument>
</dataSource>
<listingToolbar name="listing_top">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">ui/grid/toolbar</item>
</item>
</argument>
<bookmark name="bookmarks">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="storageConfig" xsi:type="array">
<item name="namespace" xsi:type="string">commercialSale_quote_grid</item>
</item>
</item>
</argument>
</bookmark>
<component name="columns_controls">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="columnsData" xsi:type="array">
<item name="provider" xsi:type="string">hk_commercialSale_quote_grid.hk_commercialSale_quote_grid.hk_commercialSale_columns</item>
</item>
<item name="component" xsi:type="string">Magento_Ui/js/grid/controls/columns</item>
<item name="displayArea" xsi:type="string">dataGridActions</item>
</item>
</argument>
</component>
<filterSearch name="fulltext">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="provider" xsi:type="string">hk_commercialSale_quote_grid.hk_commercialSale_grid_data_source</item>
<item name="chipsProvider" xsi:type="string">hk_commercialSale_quote_grid.hk_commercialSale_quote_grid.listing_top.listing_filters_chips</item>
<item name="storageConfig" xsi:type="array">
<item name="provider" xsi:type="string">hk_commercialSale_quote_grid.hk_commercialSale_quote_grid.listing_top.bookmarks</item>
<item name="namespace" xsi:type="string">current.search</item>
</item>
</item>
</argument>
</filterSearch>
<filters name="listing_filters">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="columnsProvider" xsi:type="string">hk_commercialSale_quote_grid.hk_commercialSale_quote_grid.hk_commercialSale_columns</item>
<item name="storageConfig" xsi:type="array">
<item name="provider" xsi:type="string">hk_commercialSale_quote_grid.hk_commercialSale_quote_grid.listing_top.bookmarks</item>
<item name="namespace" xsi:type="string">current.filters</item>
</item>
<item name="childDefaults" xsi:type="array">
<item name="provider" xsi:type="string">hk_commercialSale_quote_grid.hk_commercialSale_quote_grid.listing_top.listing_filters</item>
<item name="imports" xsi:type="array">
<item name="visible" xsi:type="string">hk_commercialSale_quote_grid.hk_commercialSale_quote_grid.hk_commercialSale_columns.${ $.index }:visible</item>
</item>
</item>
</item>
</argument>
</filters>
<massaction name="listing_massaction">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="selectProvider" xsi:type="string">hk_commercialSale_quote_grid.hk_commercialSale_quote_grid.hk_commercialSale_columns.ids</item>
<item name="component" xsi:type="string">Magento_Ui/js/grid/tree-massactions</item>
<item name="indexField" xsi:type="string">entity_id</item>
</item>
</argument>
<action name="delete">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="type" xsi:type="string">delete</item>
<item name="label" xsi:type="string" translate="true">Delete</item>
<item name="url" xsi:type="url" path="*/*/massDelete"/>
<item name="confirm" xsi:type="array">
<item name="title" xsi:type="string" translate="true">Delete items</item>
<item name="message" xsi:type="string" translate="true">Are you sure to delete selected quotes?</item>
</item>
</item>
</argument>
</action>
</massaction>
<paging name="listing_paging">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="storageConfig" xsi:type="array">
<item name="provider" xsi:type="string">hk_commercialSale_quote_grid.hk_commercialSale_quote_grid.listing_top.bookmarks</item>
<item name="namespace" xsi:type="string">current.paging</item>
</item>
<item name="selectProvider" xsi:type="string">hk_commercialSale_quote_grid.hk_commercialSale_quote_grid.hk_commercialSale_columns.ids</item>
</item>
</argument>
</paging>
<!--<exportButton name="export_button">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="selectProvider" xsi:type="string">hk_commercialSale_quote_grid.hk_commercialSale_quote_grid.hk_commercialSale_columns.ids</item>
</item>
</argument>
</exportButton>-->
</listingToolbar>
<columns name="hk_commercialSale_columns">
<settings>
<childDefaults>
<param name="fieldAction" xsi:type="array">
<item name="provider" xsi:type="string">hk_commercialSale_quote_grid.hk_commercialSale_quote_grid.hk_commercialSale_columns.actions</item>
<item name="target" xsi:type="string">applyAction</item>
<item name="params" xsi:type="array">
<item name="0" xsi:type="string">view</item>
<item name="1" xsi:type="string">${ $.$data.rowIndex }</item>
</item>
</param>
</childDefaults>
</settings>
<!--The list of columns-->
<selectionsColumn name="ids">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="indexField" xsi:type="string">hk_quote_id</item>
</item>
</argument>
</selectionsColumn>
<actionsColumn name="actions" class="HK\CommercialSale\Ui\Component\Listing\Column\QuoteActions">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="resizeEnabled" xsi:type="boolean">false</item>
<item name="resizeDefaultWidth" xsi:type="string">107</item>
<item name="indexField" xsi:type="string">hk_quote_id</item>
</item>
</argument>
</actionsColumn>
<column name="hk_quote_id">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="filter" xsi:type="string">text</item>
<item name="sorting" xsi:type="string">desc</item>
<item name="label" xsi:type="string" translate="true">ID</item>
</item>
</argument>
</column>
<column name="customer_email">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="filter" xsi:type="string">text</item>
<item name="label" xsi:type="string" translate="true">Email</item>
</item>
</argument>
</column>
<column name="customer_name">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="filter" xsi:type="string">text</item>
<item name="label" xsi:type="string" translate="true">Billing Customer Name</item>
</item>
</argument>
</column>
<column name="company_name">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="filter" xsi:type="string">text</item>
<item name="label" xsi:type="string" translate="true">Billing Company Name</item>
</item>
</argument>
</column>
<column name="billing_phone">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="filter" xsi:type="string">text</item>
<item name="label" xsi:type="string" translate="true">Billing Phone Number</item>
</item>
</argument>
</column>
<column name="billing_full">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="filter" xsi:type="string">text</item>
<item name="label" xsi:type="string" translate="true">Billing Address</item>
</item>
</argument>
</column>
<column name="ship_customer_name">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="filter" xsi:type="string">text</item>
<item name="label" xsi:type="string" translate="true">Shipping Customer Name</item>
</item>
</argument>
</column>
<column name="ship_company_name">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="filter" xsi:type="string">text</item>
<item name="label" xsi:type="string" translate="true">Shipping Company Name</item>
</item>
</argument>
</column>
<column name="shipping_phone">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="filter" xsi:type="string">text</item>
<item name="label" xsi:type="string" translate="true">Shipping Phone Number</item>
</item>
</argument>
</column>
<column name="shipping_full">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="filter" xsi:type="string">text</item>
<item name="label" xsi:type="string" translate="true">Shipping Address</item>
</item>
</argument>
</column>
<column name="status">
<argument name="data" xsi:type="array">
<item name="options" xsi:type="object">HK\CommercialSale\Ui\Component\Listing\Column\Quotestatus</item>
<item name="js_config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/column</item>
</item>
<item name="config" xsi:type="array">
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">select</item>
<item name="align" xsi:type="string">left</item>
<item name="filter" xsi:type="string">select</item>
<item name="label" xsi:type="string" translate="true">Status</item>
</item>
</argument>
</column>
<column name="created_at" class="Magento\Ui\Component\Listing\Columns\Date">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="filter" xsi:type="string">dateRange</item>
<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/date</item>
<item name="dataType" xsi:type="string">date</item>
<item name="label" xsi:type="string" translate="true">Created Date</item>
</item>
</argument>
</column>
<column name="updated_at" class="Magento\Ui\Component\Listing\Columns\Date">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<!--<item name="filter" xsi:type="string">dateRange</item>-->
<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/date</item>
<item name="dataType" xsi:type="string">date</item>
<item name="label" xsi:type="string" translate="true">Updated Date</item>
</item>
</argument>
</column>
<column name="followup_date" class="Magento\Ui\Component\Listing\Columns\Date">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="filter" xsi:type="string">dateRange</item>
<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/date</item>
<item name="dataType" xsi:type="string">date</item>
<item name="label" xsi:type="string" translate="true">Followup</item>
</item>
</argument>
</column>
<!--<column name="sales_rep">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="filter" xsi:type="string">text</item>
<item name="label" xsi:type="string" translate="true">Sales Rep</item>
</item>
</argument>
</column>-->
<column name="sales_rep">
<argument name="data" xsi:type="array">
<item name="options" xsi:type="object">HK\CommercialSale\Ui\Component\Listing\Column\Salesrep</item>
<item name="js_config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/column</item>
</item>
<item name="config" xsi:type="array">
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">select</item>
<item name="align" xsi:type="string">left</item>
<item name="filter" xsi:type="string">select</item>
<item name="label" xsi:type="string" translate="true">Sales Rep</item>
</item>
</argument>
</column>
<column name="source">
<argument name="data" xsi:type="array">
<item name="options" xsi:type="object">HK\CommercialSale\Ui\Component\Listing\Column\Source</item>
<item name="js_config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/column</item>
</item>
<item name="config" xsi:type="array">
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">select</item>
<item name="align" xsi:type="string">left</item>
<item name="filter" xsi:type="string">select</item>
<item name="label" xsi:type="string" translate="true">Lead Source</item>
</item>
</argument>
</column>
<column name="reserved_order_id">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="filter" xsi:type="string">text</item>
<item name="label" xsi:type="string" translate="true">Order ID</item>
</item>
</argument>
</column>
<column name="proposal_number">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="filter" xsi:type="string">text</item>
<item name="label" xsi:type="string" translate="true">Proposal Number</item>
</item>
</argument>
</column>
</columns>
</listing>