added is nullable

src/components/table/table-data.tsx

@@ -50,9 +50,16 @@ const TableHeadCell: React.FC<{
             <p className="text-sm font-medium">{columnName}</p>
             <KeyIcon columnSchema={columnSchema} />
           </div>
-          <Badge className="w-full self-start text-xs font-semibold">
-            {columnSchema?.type || "Unknown"}
-          </Badge>
+          <div className="flex items-center gap-1">
+            <Badge className="w-full self-start text-center text-xs font-semibold">
+              {columnSchema?.type || "Unknown"}
+            </Badge>
+            {columnSchema?.nullable && (
+              <Badge className="w-full self-start text-center text-xs font-semibold">
+                NULLABLE
+              </Badge>
+            )}
+          </div>
         </HoverCardContent>
       </HoverCard>
     </div>

src/components/ui/badge.tsx

@@ -29,7 +29,9 @@ export interface BadgeProps
 
 function Badge({ className, variant, ...props }: BadgeProps) {
   return (
-    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+    <div className={cn(badgeVariants({ variant }), className)} {...props}>
+      <span className="w-full">{props.children}</span>
+    </div>
   );
 }
 

src/components/ui/table.tsx

@@ -144,7 +144,7 @@ const TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps>(
                 <span className="max-w-full break-words">{children}</span>
               )}
               {
-                <Badge className="w-full self-start text-xs font-semibold">
+                <Badge className="w-full self-start text-center text-xs font-semibold">
                   {dataType || "Unknown"}
                 </Badge>
               }

src/lib/sqlite.ts

@@ -40,14 +40,20 @@ export const getTableSchema = async (database: Database, tableName: string) => {
       (acc, row) => {
         acc[row[1] as string] = {
           type: row[2] ? (row[2] as string).toUpperCase() : (row[2] as string),
-          isPrimaryKey: (row[5] as number) === 1,
-          isForeignKey: false
+          isPrimaryKey: (row[5] as number) === 1, // 1 means the column is a primary key
+          isForeignKey: false,
+          nullable: (row[3] as number) === 0 // 0 means the column is nullable, 1 means it is not nullable
         };
         return acc;
       },
       {} as Record<
         string,
-        { type: string; isPrimaryKey: boolean; isForeignKey: boolean }
+        {
+          type: string;
+          isPrimaryKey: boolean;
+          isForeignKey: boolean;
+          nullable: boolean;
+        }
       >
     );
 

src/types.ts

@@ -18,4 +18,5 @@ export interface ColumnSchema {
   isPrimaryKey?: boolean;
   isForeignKey?: boolean;
   type?: string;
+  nullable?: boolean;
 }