Added sticky table headers

Resolves #133

client/src/pages/filaments/list.tsx

@@ -168,12 +168,13 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
         </>
       )}
     >
-      <Table {...tableProps} dataSource={dataSource} rowKey="id">
+      <Table {...tableProps} sticky scroll={{ x: "max-content" }} dataSource={dataSource} rowKey="id">
         {SortedColumn({
           id: "id",
           i18ncat: "filament",
           dataSource,
           tableState,
+          width: 70,
         })}
         {FilteredQueryColumn({
           id: "vendor.name",
@@ -196,12 +197,14 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
           dataSource,
           tableState,
           filterValueQuery: useSpoolmanMaterials(),
+          width: 110,
         })}
         {SortedColumn({
           id: "price",
           i18ncat: "filament",
           dataSource,
           tableState,
+          width: 80,
         })}
         {NumberColumn({
           id: "density",
@@ -210,6 +213,7 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
           decimals: 2,
           dataSource,
           tableState,
+          width: 100,
         })}
         {NumberColumn({
           id: "diameter",
@@ -218,6 +222,7 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
           decimals: 2,
           dataSource,
           tableState,
+          width: 100,
         })}
         {NumberColumn({
           id: "weight",
@@ -226,6 +231,7 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
           decimals: 1,
           dataSource,
           tableState,
+          width: 100,
         })}
         {NumberColumn({
           id: "spool_weight",
@@ -234,6 +240,7 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
           decimals: 1,
           dataSource,
           tableState,
+          width: 100,
         })}
         {FilteredQueryColumn({
           id: "article_number",
@@ -241,6 +248,7 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
           dataSource,
           tableState,
           filterValueQuery: useSpoolmanArticleNumbers(),
+          width: 130,
         })}
         {NumberColumn({
           id: "settings_extruder_temp",
@@ -249,6 +257,7 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
           decimals: 0,
           dataSource,
           tableState,
+          width: 100,
         })}
         {NumberColumn({
           id: "settings_bed_temp",
@@ -257,6 +266,7 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
           decimals: 0,
           dataSource,
           tableState,
+          width: 100,
         })}
         {DateColumn({
           id: "registered",
@@ -269,6 +279,7 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
           i18ncat: "filament",
           dataSource,
           tableState,
+          width: 150,
         })}
         <Table.Column
           title={t("table.actions")}

client/src/pages/spools/list.tsx

@@ -227,6 +227,8 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
     >
       <Table
         {...tableProps}
+        sticky
+        scroll={{ x: "max-content" }}
         dataSource={dataSource}
         rowKey="id"
         // Make archived rows greyed out
@@ -248,6 +250,7 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
           i18ncat: "spool",
           dataSource,
           tableState,
+          width: 70,
         })}
         {SpoolIconColumn({
           id: "combined_name",
@@ -264,6 +267,7 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
           dataSource,
           tableState,
           filterValueQuery: useSpoolmanMaterials(),
+          width: 120,
         })}
         {NumberColumn({
           id: "used_weight",
@@ -272,6 +276,7 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
           decimals: 1,
           dataSource,
           tableState,
+          width: 110,
         })}
         {NumberColumn({
           id: "remaining_weight",
@@ -281,6 +286,7 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
           defaultText: t("unknown"),
           dataSource,
           tableState,
+          width: 110,
         })}
         {NumberColumn({
           id: "used_length",
@@ -289,6 +295,7 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
           decimals: 1,
           dataSource,
           tableState,
+          width: 120,
         })}
         {NumberColumn({
           id: "remaining_length",
@@ -298,6 +305,7 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
           defaultText: t("unknown"),
           dataSource,
           tableState,
+          width: 120,
         })}
         {FilteredQueryColumn({
           id: "location",
@@ -305,6 +313,7 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
           dataSource,
           tableState,
           filterValueQuery: useSpoolmanLocations(),
+          width: 120,
         })}
         {FilteredQueryColumn({
           id: "lot_nr",
@@ -312,6 +321,7 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
           dataSource,
           tableState,
           filterValueQuery: useSpoolmanLotNumbers(),
+          width: 120,
         })}
         {DateColumn({
           id: "first_used",
@@ -336,6 +346,7 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
           i18ncat: "spool",
           dataSource,
           tableState,
+          width: 150,
         })}
         <Table.Column
           title={t("table.actions")}

client/src/pages/vendors/list.tsx

@@ -114,12 +114,13 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
         </>
       )}
     >
-      <Table {...tableProps} dataSource={dataSource} rowKey="id">
+      <Table {...tableProps} sticky scroll={{ x: "max-content" }} dataSource={dataSource} rowKey="id">
         {SortedColumn({
           id: "id",
           i18ncat: "vendor",
           dataSource,
           tableState,
+          width: 70,
         })}
         {SortedColumn({
           id: "name",