improve formatting in data tables

This commit is contained in:
Milo Schwartz
2024-11-25 23:07:21 -05:00
parent 2312258468
commit 7c9e57ef12
12 changed files with 154 additions and 92 deletions

View File

@@ -22,7 +22,7 @@ import {
import { Button } from "@app/components/ui/button";
import { useState } from "react";
import { Input } from "@app/components/ui/input";
import { Plus } from "lucide-react";
import { Plus, Search } from "lucide-react";
import { DataTablePagination } from "@app/components/DataTablePagination";
interface DataTableProps<TData, TValue> {
@@ -61,19 +61,23 @@ export function RolesDataTable<TData, TValue>({
return (
<div>
<div className="flex items-center justify-between pb-4">
<Input
placeholder="Search roles"
value={
(table.getColumn("name")?.getFilterValue() as string) ??
""
}
onChange={(event) =>
table
.getColumn("name")
?.setFilterValue(event.target.value)
}
className="max-w-sm mr-2"
/>
<div className="flex items-center max-w-sm mr-2 w-full relative">
<Input
placeholder="Search roles"
value={
(table
.getColumn("name")
?.getFilterValue() as string) ?? ""
}
onChange={(event) =>
table
.getColumn("name")
?.setFilterValue(event.target.value)
}
className="w-full pl-8"
/>
<Search className="h-5 w-5 absolute left-2 top-1/2 transform -translate-y-1/2" />
</div>
<Button
onClick={() => {
if (addRole) {