this should functianally work

data/feedback.csv

@@ -1,2 +1,4 @@
 timestamp,category,comment
-2025-09-07 20:02:38,groceries,"ABZT please change this air to P1231313"
+2025-09-11 05:15:04,dashboard_table,"AIR: P853275 - most smaller issues related to this air should be eliminated"
+2025-09-11 05:15:52,source_table,"SO: 53013308 - this should be erraddicated"
+2025-09-11 05:37:58,dashboard_table,"AIR: P892467 - ABZT: need some more explanation"

main.py

@@ -11,6 +11,7 @@ from dotenv import load_dotenv
 
 load_dotenv()
 config_file = "./config.json"
+BS = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css"
 
 with open(config_file) as config_f:
     config=load(config_f)
@@ -21,7 +22,7 @@ def main() -> None:
     # load the data and create the data manager
     data = load_mtbf_data("data/blank.csv")
 
-    app = Dash(external_stylesheets=[dbc.themes.LUX])
+    app = Dash(external_stylesheets=[BS])
     app.title = "Reliability Dashboard"
     app.layout = create_layout(app, data)
     app.run()

src/app.py

@@ -16,6 +16,7 @@ server = app.server
 app.config['suppress_callback_exceptions'] = True
 
 df = pd.read_csv("data/spc_data.csv")
+df_air = pd.read_csv("data/blank.csv")
 
 params = list(df)
 max_length = len(df)
@@ -680,6 +681,35 @@ def build_chart_panel():
                     }
                 }
                 )
+            ),
+            html.Div(
+                id='air-table-container',
+                children=[
+                    generate_section_banner('AIR Issue Details'),
+                    dash_table.DataTable(
+                        id='air-issue-table',
+                        columns=[
+                            {"name": i, "id": i} for i in ["AIR", "Air_issue_description", "Close_notes", "P_Hits"]
+                        ],
+                        data=[],  # Initial empty data
+                        style_header={
+                            'backgroundColor': 'rgb(45, 48, 56)',
+                            'fontWeight': 'bold',
+                            'color': '#95969A'
+                        },
+                        style_data_conditional=[
+                            {
+                                'if': {'row_index': 'odd'},
+                                'backgroundColor': 'rgb(55, 58, 66)'
+                            }
+                        ],
+                        style_cell={
+                            'backgroundColor': 'rgb(45, 48, 56)',
+                            'color': '#95969A',
+                            'border': '1px solid rgb(80, 80, 80)'
+                        },
+                    )
+                ]
             )
         ]
     )
@@ -1193,6 +1223,26 @@ def update_piechart(interval, stored_data):
     return new_figure
 
 
+@app.callback(
+    Output('air-issue-table', 'data'),
+    Input('interval-component', 'n_intervals')
+)
+def update_air_issue_table(interval):
+    if interval == 0:
+        return []
+
+    total_count = 0
+    if interval > max_length:
+        total_count = max_length - 1
+    elif interval > 0:
+        total_count = interval
+
+    filtered_df_air = df_air.iloc[:total_count]
+
+    table_data = filtered_df_air[["AIR", "Air_issue_description", "Close_notes", "P_Hits"]].to_dict('records')
+    return table_data
+
+
 # Running the server
 if __name__ == '__main__':
     app.run_server(debug=True, port=8050)

src/components/data_table.py

@@ -36,8 +36,8 @@ def render(app: Dash, data: pd.DataFrame) -> html.Div:
         
         table_data = hits_data.groupby(MTBFSchema.AIR).agg(
             count=(hits_col, 'size'),
-            air_issue_description=(MTBFSchema.AIR_ISSUE_DESCRIPTION, lambda x: ', '.join(x.unique())),
+            air_issue_description=(MTBFSchema.AIR_ISSUE_DESCRIPTION, lambda x: ', '.join(x.dropna().astype(str).unique())),
-            close_notes=(MTBFSchema.CLOSE_NOTES, lambda x: ', '.join(x.unique()))
+            close_notes=(MTBFSchema.CLOSE_NOTES, lambda x: ', '.join(x.dropna().astype(str).unique()))
         ).reset_index()
 
         if 'remove_single' in single_hitter_filter:
@@ -56,7 +56,9 @@ def render(app: Dash, data: pd.DataFrame) -> html.Div:
             columns=[{"name": i, "id": i} for i in table_data.columns],
             page_size=10,
             row_selectable='single',
-            selected_rows=[]
+            selected_rows=[],
+            filter_action='native',
+            sort_action='native'
         )
 
     @app.callback(