Add rtl option

README.md

@@ -109,11 +109,12 @@ The first three are column based and work similarly:
 
 All column based layouts accept the following options:
 
-|Option|Values|Description|Default
+|Option|Values|Description|Default|
 |---|---|---|---|
 |`width`| number | Size in pixels of each column | 300 |
 |`max_width` | number | Maximum width of a card | 1.5 * `width` if specified <br> otherwise 500 |
 |`max_cols` | number | Maximum number of columns to show | 4 if sidebar is hidden <br> 3 if sidebar is shown |
+|`rtl`| `true`/`false` | Place columns in right-to-left order | `false`|
 
 ### Masonry layout
 

src/layouts/base-column-layout.ts

@@ -10,6 +10,7 @@ import { BaseLayout } from "./base-layout";
 
 export class BaseColumnLayout extends BaseLayout {
   @property() _columns?: number;
+  @property() _config: ColumnViewConfig;
 
   _observer?: ResizeObserver;
   _mediaQueries: Array<MediaQueryList | null> = [];
@@ -151,6 +152,9 @@ export class BaseColumnLayout extends BaseLayout {
     );
 
     cols = cols.filter((c) => c.childElementCount > 0);
+    if (this._config.layout?.rtl) {
+      cols.reverse();
+    }
 
     const columns = this.shadowRoot.querySelector("#columns");
     while (columns.firstChild) columns.removeChild(columns.firstChild);

src/types.ts

@@ -29,7 +29,7 @@ export interface ViewConfig {
   title?: string;
   type?: string;
   cards?: Array<CardConfig>;
-  layout?: any;
+  layout?: {};
 }
 
 export interface ColumnViewConfig extends ViewConfig {
@@ -38,6 +38,7 @@ export interface ColumnViewConfig extends ViewConfig {
     max_width?: number;
     max_cols?: number;
     min_height?: number;
+    rtl?: boolean;
   };
 }