tonym/spoolman2
1
0
Fork 0
Code Issues 19 Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Added sticky table headers

Browse Source 
Resolves #133
This commit is contained in:
Donkie
2023-10-28 10:30:28 +02:00
parent 09a308b2ce
commit e31aeebe97
3 changed files with 25 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
client/src/pages/filaments/list.tsx
View File

@@ -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")}

11
client/src/pages/spools/list.tsx
View File

@@ -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")}

3
client/src/pages/vendors/list.tsx vendored
View File

@@ -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",