Solid UI Neobrutalism

1
import { For } from "solid-js";
2

3
import {
4
  Table,
5
  TableBody,
6
  TableCaption,
7
  TableCell,
8
  TableFooter,
9
  TableHead,
10
  TableHeader,
11
  TableRow,
12
} from "~/components/ui/table";
13

14
const invoices = [
15
  {
16
    invoice: "INV001",
17
    paymentStatus: "Paid",
18
    totalAmount: "$250.00",
19
    paymentMethod: "Credit Card",
20
  },
21
  {
22
    invoice: "INV002",
23
    paymentStatus: "Pending",
24
    totalAmount: "$150.00",
25
    paymentMethod: "PayPal",
26
  },
27
  {
28
    invoice: "INV003",
29
    paymentStatus: "Unpaid",
30
    totalAmount: "$350.00",
31
    paymentMethod: "Bank Transfer",
32
  },
33
  {
34
    invoice: "INV004",
35
    paymentStatus: "Paid",
36
    totalAmount: "$450.00",
37
    paymentMethod: "Credit Card",
38
  },
39
  {
40
    invoice: "INV005",
41
    paymentStatus: "Paid",
42
    totalAmount: "$550.00",
43
    paymentMethod: "PayPal",
44
  },
45
  {
46
    invoice: "INV006",
47
    paymentStatus: "Pending",
48
    totalAmount: "$200.00",
49
    paymentMethod: "Bank Transfer",
50
  },
51
  {
52
    invoice: "INV007",
53
    paymentStatus: "Unpaid",
54
    totalAmount: "$300.00",
55
    paymentMethod: "Credit Card",
56
  },
57
];
58

59
export default function TableDemo() {
60
  return (
61
    <Table>
62
      <TableCaption>A list of your recent invoices.</TableCaption>
63
      <TableHeader>
64
        <TableRow>
65
          <TableHead class="w-[100px]">Invoice</TableHead>
66
          <TableHead>Status</TableHead>
67
          <TableHead>Method</TableHead>
68
          <TableHead class="text-right">Amount</TableHead>
69
        </TableRow>
70
      </TableHeader>
71
      <TableBody>
72
        <For each={invoices}>
73
          {(invoice) => (
74
            <TableRow>
75
              <TableCell class="font-medium">{invoice.invoice}</TableCell>
76
              <TableCell>{invoice.paymentStatus}</TableCell>
77
              <TableCell>{invoice.paymentMethod}</TableCell>
78
              <TableCell class="text-right">{invoice.totalAmount}</TableCell>
79
            </TableRow>
80
          )}
81
        </For>
82
      </TableBody>
83
      <TableFooter>
84
        <TableRow>
85
          <TableCell colSpan={3}>Total</TableCell>
86
          <TableCell class="text-right">$2,500.00</TableCell>
87
        </TableRow>
88
      </TableFooter>
89
    </Table>
90
  );
91
}

Installation#

Copy and paste the following code into your project

1
import type { Component, ComponentProps } from "solid-js";
2

3
import { splitProps } from "solid-js";
4

5
import { cn } from "~/lib/utils";
6

7
const Table: Component<ComponentProps<"table">> = (props) => {
8
  const [local, others] = splitProps(props, ["class"]);
9
  return (
10
    <div data-slot="table" class="relative w-full overflow-auto">
11
      <table
12
        class={cn(
13
          "w-full caption-bottom rounded-base border-2 border-border text-sm",
14
          local.class,
15
        )}
16
        {...others}
17
      />
18
    </div>
19
  );
20
};
21

22
const TableHeader: Component<ComponentProps<"thead">> = (props) => {
23
  const [local, others] = splitProps(props, ["class"]);
24
  return (
25
    <thead
26
      data-slot="table-header"
27
      class={cn("[&_tr]:border-b-4", local.class)}
28
      {...others}
29
    />
30
  );
31
};
32

33
const TableBody: Component<ComponentProps<"tbody">> = (props) => {
34
  const [local, others] = splitProps(props, ["class"]);
35
  return (
36
    <tbody
37
      data-slot="table-body"
38
      class={cn("[&_tr:last-child]:border-0", local.class)}
39
      {...others}
40
    />
41
  );
42
};
43

44
const TableFooter: Component<ComponentProps<"tfoot">> = (props) => {
45
  const [local, others] = splitProps(props, ["class"]);
46
  return (
47
    <tfoot
48
      data-slot="table-footer"
49
      class={cn(
50
        "bg-primary/80 font-medium text-primary-foreground",
51
        local.class,
52
      )}
53
      {...others}
54
    />
55
  );
56
};
57

58
const TableRow: Component<ComponentProps<"tr">> = (props) => {
59
  const [local, others] = splitProps(props, ["class"]);
60
  return (
61
    <tr
62
      data-slot="table-row"
63
      class={cn(
64
        "border-b transition-colors hover:bg-primary/20 data-[state=selected]:bg-muted",
65
        local.class,
66
      )}
67
      {...others}
68
    />
69
  );
70
};
71

72
const TableHead: Component<ComponentProps<"th">> = (props) => {
73
  const [local, others] = splitProps(props, ["class"]);
74
  return (
75
    <th
76
      data-slot="table-head"
77
      class={cn(
78
        "h-10 px-2 text-left align-middle font-bold [&:has([role=checkbox])]:pr-0",
79
        local.class,
80
      )}
81
      {...others}
82
    />
83
  );
84
};
85

86
const TableCell: Component<ComponentProps<"td">> = (props) => {
87
  const [local, others] = splitProps(props, ["class"]);
88
  return (
89
    <td
90
      data-slot="table-cell"
91
      class={cn("p-2 align-middle [&:has([role=checkbox])]:pr-0", local.class)}
92
      {...others}
93
    />
94
  );
95
};
96

97
const TableCaption: Component<ComponentProps<"caption">> = (props) => {
98
  const [local, others] = splitProps(props, ["class"]);
99
  return (
100
    <caption
101
      data-slot="table-caption"
102
      class={cn("mt-4 text-sm text-muted-foreground", local.class)}
103
      {...others}
104
    />
105
  );
106
};
107

108
export {
109
  Table,
110
  TableHeader,
111
  TableBody,
112
  TableFooter,
113
  TableHead,
114
  TableRow,
115
  TableCell,
116
  TableCaption,
117
};

Update the import paths to match your project setup.

Usage#

1
import {
2
  Table,
3
  TableBody,
4
  TableCaption,
5
  TableCell,
6
  TableFooter,
7
  TableHead,
8
  TableHeader,
9
  TableRow,
10
} from "~/components/ui/table";

1
<Table>
2
  <TableCaption>A list of your recent invoices.</TableCaption>
3
  <TableHeader>
4
    <TableRow>
5
      <TableHead>Invoice</TableHead>
6
      <TableHead>Payment Status</TableHead>
7
      <TableHead>Payment Method</TableHead>
8
      <TableHead class="text-right">Total Amount</TableHead>
9
    </TableRow>
10
  </TableHeader>
11
  <TableBody>
12
    <TableRow>
13
      <TableCell class="font-medium">INV-001</TableCell>
14
      <TableCell>Paid</TableCell>
15
      <TableCell>Credit Card</TableCell>
16
      <TableCell class="text-right">$1,000.00</TableCell>
17
    </TableRow>
18
  </TableBody>
19
</Table>