openstatus.dev
Openstatus
www.openstatus.dev
chore: apply feedback
authored by
Maximilian Kaske
and committed by
Maximilian Kaske
7cb7f63a
9101592a
+35
-6
+17
apps/web/src/components/content/image-with-caption.tsx
+17
apps/web/src/components/content/image-with-caption.tsx
···
1
+
// TODO: use following instead https://github.com/rehypejs/rehype-unwrap-images
2
+
// as figcaption is supported in prose plugin https://github.com/tailwindlabs/tailwindcss-typography?tab=readme-ov-file#element-modifiers
3
+
4
+
export interface ImageWithCaptionProps {
5
+
src: string;
6
+
alt?: string;
7
+
caption: string;
8
+
}
9
+
10
+
export function ImageWithCaption({ src, alt, caption }: ImageWithCaptionProps) {
11
+
return (
12
+
<figure>
13
+
<figcaption>{caption}</figcaption>
14
+
<img src={src} alt={alt ?? caption} />
15
+
</figure>
16
+
);
17
+
}
+4
apps/web/src/components/content/mdx-components.tsx
+4
apps/web/src/components/content/mdx-components.tsx
···
28
28
import Pre from "./pre";
29
29
import type { SimpleChartProps } from "./simple-chart";
30
30
import { SimpleChart } from "./simple-chart";
31
+
import { ImageWithCaption, ImageWithCaptionProps } from "./image-with-caption";
31
32
32
33
export const components = {
33
34
a: ({ href = "", ...props }: AnchorHTMLAttributes<HTMLAnchorElement>) => {
···
84
85
</div>
85
86
);
86
87
},
88
+
ImageWithCaption: (props: ImageWithCaptionProps) => (
89
+
<ImageWithCaption {...props} />
90
+
),
87
91
table: (props: HTMLAttributes<HTMLTableElement>) => <Table {...props} />,
88
92
thead: (props: HTMLAttributes<HTMLTableSectionElement>) => (
89
93
<TableHeader {...props} />
+14
-6
apps/web/src/content/posts/the-data-table-i-always-wanted.mdx
+14
-6
apps/web/src/content/posts/the-data-table-i-always-wanted.mdx
···
10
10
tag: engineering
11
11
---
12
12
13
-
First, a note: While there's still a long way to go, the PR [#11](https://github.com/openstatusHQ/data-table-filters/pull/11) marks an important second milestone after the initial release a few months ago. We now have a solid foundation to focus on the component API design and data fetching for the data table. Though you can create your own data table using config files (for "sheet," "filters," and "columns"), you end up writing more code than you would like.
13
+
We have release our react data-table based on [shadcn/ui](https://ui.shadcn.com/) a couple of months ago. While there's still in development, the PR [#11](https://github.com/openstatusHQ/data-table-filters/pull/11) marks an important second milestone after the initial release a few months ago. We now have a solid foundation to focus on the component API design and data fetching. Though you can create your own data table using only config files (for "sheet," "filters," and "columns"), you end up writing more code than you would like.
14
14
15
-
If you want to try out the demo right away [logs.run/i](http://logs.run/i) or go to the [data-table-filters](https://github.com/openstatusHQ/data-table-filters) repository.
15
+
If you want to try out the demo right away [logs.run/i](http://logs.run/i) or go to the [data-table-filters](https://github.com/openstatusHQ/data-table-filters) GitHub repository - it's open source.
16
16
17
17
### Design improvements
18
18
19
19
We've reworked the design. Adding table borders improves clarity and structure. We've replaced the `Check` icon with the rounded square already used in the Chart to maintain design consistency. We've also removed the "green" highlighting to emphasize bad requests instead.
20
20
21
-
A quick look at **before** (first screenshot) and **after** (second screenshot):
21
+
A quick look of the before/after changes:
22
22
23
-
23
+
<ImageWithCaption
24
+
src="/assets/posts/the-data-table-i-always-wanted/before.png"
25
+
alt="before"
26
+
caption="before"
27
+
/>
24
28
25
-
29
+
<ImageWithCaption
30
+
src="/assets/posts/the-data-table-i-always-wanted/after.png"
31
+
alt="after"
32
+
caption="after"
33
+
/>
26
34
27
35
We have been inspired by [Vercel](http://vercel.com/?ref=openstatus), [Datadog](http://datadoghq.com/?ref=openstatus) and [Axiom](http://axiom.co/?ref=openstatus) when it comes to design and features.
28
36
···
87
95
88
96
Performance is improving. We've moved most of the state into a dedicated context, so only components consuming it rerender. Previously, our entire `data-table-infinite.tsx` component would trigger rerenders for all child components on any property change.
89
97
90
-
Very important: **we will stick with the [shadcn](https://ui.shadcn.com/) defaults** and avoid additional libraries except [`nuqs`](https://nuqs.47ng.com/), an excellent type-safe search params state manager supporting major React frameworks. We'll keep using React Context for state management, letting you choose your preferred library (zustand, jotai, redux) when needed.
98
+
Very important: **we will stick with the shadcn defaults** and avoid additional libraries except [`nuqs`](https://nuqs.47ng.com/), an excellent type-safe search params state manager supporting major React frameworks. We'll keep using React Context for state management, letting you choose your preferred library (zustand, jotai, redux) when needed.
91
99
92
100
We've added `debounce` to all possible controls to prevent renders on every keystroke. This helps with input searches and slider value changes.
93
101