how would you deal with a DataTable value that is too long? #1315
-
In the case of a long value that makes the column too wide, I am probably expecting the value to be truncated and displaying the whole value in a tooltip on hover, but I could not achieve a good result with the provided tooltip components. Any tips? |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
@halindraprakoso an alternative you may consider is having your contents wrap. You can achieve this by setting a <script>
import { DataTable } from "carbon-components-svelte";
</script>
<DataTable
headers={[
{ key: "name", value: "Name" },
{ key: "protocol", value: "Protocol", width: "20ch" }, /* custom width */
{ key: "port", value: "Port" },
{ key: "rule", value: "Rule" },
]}
rows={[
{
id: "a",
name: "Load Balancer 3",
protocol: "HTTP",
port: 3000,
rule: "Round robin",
}
]}
/> If you want to truncate your copy, then perhaps using slotted cells you could have the text truncate with CSS and provide a button for the user to expand its contents inline; that way a screen reader can still read the copy and sighted users still have a means of reading the full text. |
Beta Was this translation helpful? Give feedback.
@halindraprakoso an alternative you may consider is having your contents wrap. You can achieve this by setting a
width
key in your respective column heading:If you want to truncate your copy, then perhaps using slotted cells you could have the text truncate wi…