Added Alias Support

public/Database/Example.dbml

@@ -6,18 +6,28 @@ Project Example {
     '''
 }
 
-Table Users {
-    id int [primary key, not null, Note: 'This is the ID Column', default: 10]
-    username varchar
-
-    Note: 'This is the User Table'
+Table Users as U {
+    ID integer [primary key]
+    Username varchar
+    Role varchar
+    created_at timestamp
+    Note: 'Users Table'
 }
 
 Table Posts {
-  id int [primary key, not null, default: 10]
-  user_id int
+    ID integer [primary key]
+    Title varchar
+    Body text [note: 'Content of the Post']
+    User integer
+    Status Post_Status
+    created_at timestamp
+    Note: 'Posts Table'
+}
 
-  Note: 'This is the Posts Table'
+Enum Post_Status {
+    Draft
+    Published
+    Private [note: 'Visible Via URL Only']
 }
 
-Ref UserPosts: Posts.user_id > Users.id
+Ref PostsUserID: Posts.User > Users.ID  // Many to One

src/App.tsx

@@ -84,6 +84,7 @@ export default class App extends React.Component<IAppProps, IAppState> {
                         <Route path={"/" + table.Name} key={index}>
                             <Table
                                 Name={table.Name}
+                                Alias={table.Alias}
                                 Columns={table.Columns}
                                 Note={table.Note}
                                 References={this.GetReferences(table.Name, this.state.Json.References)}

src/Components/Navigation.tsx

@@ -27,6 +27,7 @@ import { DBML } from "../Lib/Declarations";
 import { Link, RouteComponentProps, withRouter } from "react-router-dom";
 import { Link as MaterialLink } from "@material-ui/core";
 import { Theme, WithStyles } from "@material-ui/core/styles";
+import ListSubheader from "@material-ui/core/ListSubheader";
 
 const drawerWidth = 220;
 
@@ -188,6 +189,7 @@ class Navigation extends React.Component<INavigationProps, INavigationState> {
                         />
                     </FormControl>
                     <List component="nav" dense>
+                        <ListSubheader>Tables</ListSubheader>
                         {this.props.Database.Tables.filter(x => x.Name.toLowerCase().includes(this.state.Search.toLowerCase())).map((table, index) => {
                             return (
                                 <ListItemLink
@@ -198,6 +200,9 @@ class Navigation extends React.Component<INavigationProps, INavigationState> {
                                 />
                             );
                         })}
+                        {this.props.Database.Enums !== undefined &&
+                            <ListSubheader>Enums</ListSubheader>
+                        }
                     </List>
                 </Drawer>
             </>

src/Lib/DBMLLib.ts

@@ -35,7 +35,8 @@ export function DBML2JSON(dbml: string): DBML {
         var tableNote = item.match(/(?<=Note: ').*\w/g) as string[];
 
         var table: Table = {
-            Name: item.match(/(?<=Table ).*\w/g)?.toString() as string,
+            Name: item.match(/(?<=Table )[^]+?(?= )/g)?.toString() as string,
+            Alias: item.match(/(?<=as )[^]+?(?= {)/g)?.toString() as string,
             Columns: columns,
             Note: tableNote[tableNote?.length - 1] as string,
         };

src/Lib/Declarations.ts

@@ -3,11 +3,13 @@ export interface DBML {
     database_type: string;
     Note: string;
     Tables: Table[];
+    Enums: Enum[];
     References: Reference[];
 }
 
 export interface Table {
     Name: string;
+    Alias: string;
     Columns: Column[];
     Note: string;
 }
@@ -20,6 +22,11 @@ export interface Column {
     Note: string;
 }
 
+export interface Enum {
+    Name: string;
+    Items: string[];
+}
+
 export interface Reference {
     Name: string;
     Type: ConnectionType;

src/Pages/Table.tsx

@@ -39,6 +39,7 @@ const styles = (theme: Theme) => createStyles({
 
 interface ITableProps extends WithStyles<typeof styles> {
     Name: string;
+    Alias: string;
     Columns: Column[];
     Note: string;
     References: Reference[];
@@ -83,9 +84,21 @@ class Table extends React.Component<ITableProps, ITableState> {
             <>
                 <Grid container spacing={2}>
                     <Grid item xs={12}>
-                        <Typography variant="h2">
-                            {this.props.Name}
-                        </Typography>
+                        {this.props.Alias === undefined &&
+                            <Typography variant="h2">
+                                {this.props.Name}
+                            </Typography>
+                        }
+                        {this.props.Alias !== undefined &&
+                            <>
+                                <Typography variant="h2">
+                                    {this.props.Alias}
+                                </Typography>
+                                <Typography variant="subtitle1">
+                                    Table Name: {this.props.Name}
+                                </Typography>
+                            </>
+                        }
                     </Grid>
                     <Grid item xs={12}>
                         <Typography variant="h5">