שינוי DirectoryTables

סיכום מבוסס בינה מלאכותית

The discussion revolves around modifying the DirectoryTable component in a custom Discourse theme. mfrakesSIC asks how to change the table layout to use divs instead of a traditional table structure. awesomerobot explains that the team is transitioning to a CSS grid-based layout using divs, which will soon be the default. Until then, users can override the template by modifying directory-table.hbs in their theme, as detailed in the theme development guide. mfrakesSIC reports that changes aren’t reflecting, possibly due to caching or missing rebuild steps. The conversation also touches on the structure of the component, with awesomerobot clarifying that tr tags are no longer used, as the layout is now handled by the DirectoryItem component, which can be found in directory-item.hbs.

I know this is dumb before I ask but I accept that I too am dumb.

How do I modify this in a custom theme:

<DirectoryTable
              @items={{this.model}}
              @columns={{this.columns}}
              @showTimeRead={{this.showTimeRead}}
              @order={{this.order}}
              @asc={{this.asc}}
            />

(edit) the goal would be to change this to perhaps.. rows and columns with divs.

Before you even reply Kris, I appreciate your time.

Good timing! This week I’ve started updating the directory to move away from a <table> to a more flexible div layout that recreates the table layout using CSS grid. So if you can wait a week or two this should be the new default.

Otherwise you’d have to override our default template here from within a theme. We have some details about template overrides in Developing Discourse Themes & Theme Components

This is exactly what I needed thank you kindly!

Order by location? Showing closest members first? :innocent:

So I’ve got my custom theme installed, I’ve modified this file: “discourse/app/assets/javascripts/discourse/app/components/directory-table.hbs at ba3f62f576068035bc8fbda615e595960cd4520c · discourse/discourse · GitHub”, checked and installed updates for it, but I don’t see any changes. I added a class to the “directory-table-container” as a test. Do I need to rebuild the container?

The modified file location:
$theme/javascripts/discourse/app/components/directory-table.hbs

So I’ve figured out the table and tds but where on earth do the tr tags live?

This previously mentioned work has been merged into Discourse, and we no longer use table for user tables and now use a combination of div and CSS grid

You’d have to check the DirectoryItem component, which is found here: https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/components/directory-item.hbs