如何让我的简单Datagrid具有默认前端样式？

This is how my current datagrid shows as:

current datagrid

I have tried to extend the core frontend-product-search-grid but it appears styleless as well

my datagrids.yml

datagrids:
    razoyo-productbybrand-grid:
        # extends: frontend-product-search-grid
        options:
            frontend: true
            entityHint: oro.product.entity_plural_label
            entity_pagination: true
            requireJSModules:
                - oroproduct/js/app/datagrid/frontend-product-display-options-builder
                - oroproduct/js/app/datagrid/frontend-product-filters-events-dispatcher-builder
        extended_entity_name: '%oro_product.entity.product.class%'    
        source:
            type: orm 
            query:
                select:
                    - product.id
                   # - product.sku
                   # - product.brand as 
                    - product.denormalizedDefaultName as productName
                   # - product.pagetemplate_id
                   # - product.category_id
                from:
                    - { table: '%oro_product.entity.product.class%', alias: product }
                where:
                    and:
                    - product.brand = :brandId
            bind_parameters:
                # Get the "brandId" parameter from the datagrid
                # and set its value to the "brandId" parameter in the datasource query
                brandId: brandId            

        columns:
            productName:
                label: oro.product.names.label
        properties:
            id: ~
            view_link:
                type:  url 
                route: oro_product_frontend_product_view
                params: [ id ]
            newArrival: ~
            unit: ~

my productsbybrand.yml

layout:
    actions:
        - '@setBlockTheme':
            themes: 'productsbybrand.html.twig'
        - '@add':
            id: product_by_brand_block
            parentId: page_content
            blockType: block

my productsbybrand.html.twig

{% block _product_by_brand_block_widget %}
    {% import 'OroDataGridBundle::macros.html.twig' as dataGrid %}
    {% include 'OroDataGridBundle:js:toolbar.html.twig' %}

    <div  class="js-frontend-datagrid-grid-views-tpl"></div>

    {% block content %}
         {# Accessing route id from request and passing that in as brandId #}    
         {{ dataGrid.renderGrid('razoyo-productbybrand-grid', {brandId: app.request.get('id')}) }}
    {% endblock %}

{% endblock %}

This is how I desire it to show: desired datagrid