block-content-to-react
block-content-to-react copied to clipboard
sanity-io
Question: Table within text
I am looking for some guidance. (I could not find a sample with this use case.)
I am looking to include table data (rows, columns) within text. (In my case it is a price list.)
Imagine a product page with like:
Our product comes in three different styles.
| Style | Price |
|--------|-------|
| Small | $10 |
| Medium | $20 |
| Large | $30 |
More text...
My understanding is that Portable Text has the List type but not Table type, correct?
Could this be edited with Sanity Studio?
If not, I believe one solution would be to add a new type in Sanity like "ProductStyle" with "Name" and "Price" properties.
Could I reference this from Portable Text?
Something like this:
Our product comes in three different styles.
<REFERENCE PRICE TABLE HERE>
More text...
How would I extend "block-content-to-react" to render the table?
Good question! Some of the use cases may be covered by employing the Table or Datatable Sanity plugins, but that does not help if you need to integrate a table between your text paragraphs. I guess one could do some trick in presentation to achieve something like this, but in my use case, where an editor just wants to add a small table between two random paragraphs... L.E. You can use the Table plugin and add the table type in your bodyPortableText. Then make a serializer for presentation and you're set. I'll be coming back once I have an example.
Found the solution today, it was there all along... create a PortableText block type with a table field type.
I borrowed from Holly Gronau via Slack. https://sanity-io-land.slack.com/archives/C9Z7RC3V1/p1664222574532039?thread_ts=1664201769.927669&cid=C9Z7RC3V1
export default {
title: "Table for PortableText",
name: "table",
type: "object",
fields: [
{
name: "content",
title: "Cell Content",
type: "tableBlockContent",
},
],
preview: {
select: {
content: "content",
subtitle: "_type",
},
prepare({ content, subtitle }) {
switch (content[0]._type) {
case "block":
return {
title: content[0].children[0].text,
subtitle,
};
default:
return {
title: `This list item start with '${content[0]._type}''`,
subtitle,
};
}
},
},
};
Example of adding the type to your PortableText definition, in case that's new for someone...
export default {
name: "bodyPortableText",
type: "array",
title: "Content body",
of: [
{
type: "block",
title: "Block",
styles: [
{ title: "Normal", value: "normal" },
{ title: "H1", value: "h1" },
{ title: "H2", value: "h2" },
],
marks: {
decorators: [
{ title: "Strong", value: "strong" },
{ title: "Emphasis", value: "em" },
],
},
},
{ type: "table" },
],
};
@doublejosh I think i get your example, but where does the type tableBlockContent come from??
I've found some bugs with the UI where it has an error when trying to add columns. I've had to make a different edit to the table, and then it works again. Haven't tracked that one down yet.
Closing this, as the new @portabletext/react library is the successor to this module.
Please see https://github.com/portabletext/react-portabletext
