Custom list formatting not visible in list preview

Question

I changed the formatting of a text column in a list, added a few, very basic formatting:

{
    "$schema": "http://columnformatting.sharepointpnp.com/columnFormattingSchema.json",
    "debugMode": true,
    "elmType": "div",
    "txtContent": "@currentField",
    "style": {
                    "width": "80px",
                    "background-color": "#189bdb",
                    "float": "left",
                    "color": "#fff",
                    "padding": "5px",
                    "margin-right": "10px",
                    "flex": "1",
                    "height": "80px"         
    }

 }

Then I added a list preview web part to my page (modern site), selected the list, but the format change is not visible. How can I present the new format with the list preview web part?

Answer 1

Currently, the Modern list view webpart is still in preview. So, couple of stuff like json column formatting is not supported at the moment.

Seems like obvious choice to me since we will, quite often, need to format the columns, but looks like we are gonna have to wait.

There's a uservoice request, would suggest that you upvote it so that it can picked by MS team in their future updates. There's no ETA to this.

UserVoice link - Column formatting in list view webpart

If you do indeed want to display list columns like that, you should develop a custom SPFx webpart where you will be in full control of the UI.