mirror of
https://github.com/gradio-app/gradio.git
synced 2025-03-31 12:20:26 +08:00
Wrap dataframe (#1571)
* add suport for table cell wrapping * revert pkginfo change * revert pkginfo change * fixed tests * formatting * type hint Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
This commit is contained in:
parent
5e7cf62a47
commit
8710d3a079
@ -43,6 +43,27 @@ with gr.Blocks() as demo:
|
||||
gr.Dataframe(
|
||||
interactive=True, headers=["One", "Two", "Three", "Four"], col_count=4
|
||||
)
|
||||
gr.DataFrame(
|
||||
[
|
||||
[
|
||||
"Hello my name is frank, I am liking the small turtle you have there. It would be a shame if it went missing.",
|
||||
"Hello my name is frank, I am liking the small turtle you have there. It would be a shame if it went missing.",
|
||||
"Hello my name is frank, I am liking the small turtle you have there. It would be a shame if it went missing.",
|
||||
],
|
||||
[
|
||||
"Hello my name is frank, I am liking the small turtle you have there. It would be a shame if it went missing.",
|
||||
"Hello my name is frank, I am liking the small turtle you have there. It would be a shame if it went missing.",
|
||||
"Hello my name is frank, I am liking the small turtle you have there. It would be a shame if it went missing.",
|
||||
],
|
||||
[
|
||||
"Hello my name is frank, I am liking the small turtle you have there. It would be a shame if it went missing.",
|
||||
"Hello my name is frank, I am liking the small turtle you have there. It would be a shame if it went missing.",
|
||||
"Hello my name is frank, I am liking the small turtle you have there. It would be a shame if it went missing.",
|
||||
],
|
||||
],
|
||||
headers=["One", "Two", "Three"],
|
||||
wrap=True,
|
||||
)
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
|
@ -428,4 +428,3 @@ journal={arXiv preprint arXiv:1906.02569},
|
||||
year={2019}
|
||||
}
|
||||
```
|
||||
|
||||
|
@ -2331,6 +2331,7 @@ class Dataframe(Changeable, IOComponent):
|
||||
interactive: Optional[bool] = None,
|
||||
visible: bool = True,
|
||||
elem_id: Optional[str] = None,
|
||||
wrap: bool = False,
|
||||
**kwargs,
|
||||
):
|
||||
"""
|
||||
@ -2348,8 +2349,10 @@ class Dataframe(Changeable, IOComponent):
|
||||
label (Optional[str]): component name in interface.
|
||||
show_label (bool): if True, will display label.
|
||||
visible (bool): If False, component will be hidden.
|
||||
wrap (Optional[bool]): if True text in table cells will wrap when appropriate, if False the table will scroll horiztonally. Defaults to False.
|
||||
"""
|
||||
|
||||
self.wrap = wrap
|
||||
self.row_count = self.__process_counts(row_count)
|
||||
self.col_count = self.__process_counts(
|
||||
col_count, len(headers) if headers else 3
|
||||
@ -2396,6 +2399,7 @@ class Dataframe(Changeable, IOComponent):
|
||||
"max_rows": self.max_rows,
|
||||
"max_cols": self.max_cols,
|
||||
"overflow_row_behaviour": self.overflow_row_behaviour,
|
||||
"wrap": self.wrap,
|
||||
**IOComponent.get_config(self),
|
||||
}
|
||||
|
||||
|
@ -1038,6 +1038,7 @@ class TestDataframe(unittest.TestCase):
|
||||
"elem_id": None,
|
||||
"visible": True,
|
||||
"interactive": None,
|
||||
"wrap": False,
|
||||
},
|
||||
)
|
||||
dataframe_input = gr.Dataframe()
|
||||
@ -1085,6 +1086,7 @@ class TestDataframe(unittest.TestCase):
|
||||
["", "", ""],
|
||||
],
|
||||
"interactive": None,
|
||||
"wrap": False,
|
||||
},
|
||||
)
|
||||
with self.assertRaises(ValueError):
|
||||
|
@ -18,6 +18,7 @@
|
||||
export let parent: string | null = null;
|
||||
export let style: Styles = {};
|
||||
export let label: string | null = null;
|
||||
export let wrap: boolean;
|
||||
|
||||
$: {
|
||||
if (value && !Array.isArray(value)) {
|
||||
@ -58,5 +59,6 @@
|
||||
on:change={handle_change}
|
||||
editable={mode === "dynamic"}
|
||||
{style}
|
||||
{wrap}
|
||||
/>
|
||||
</div>
|
||||
|
@ -17,6 +17,7 @@
|
||||
|
||||
export let editable = true;
|
||||
export let style: Styles = {};
|
||||
export let wrap: boolean = false;
|
||||
|
||||
const dispatch = createEventDispatcher<{ change: typeof values }>();
|
||||
|
||||
@ -472,8 +473,9 @@
|
||||
</p>
|
||||
{/if}
|
||||
<div
|
||||
class="scroll-hide whitespace-nowrap overflow-hidden rounded-lg relative border transition-colors overflow-x-scroll {classes}"
|
||||
class="scroll-hide overflow-hidden rounded-lg relative border transition-colors overflow-x-scroll {classes}"
|
||||
class:border-green-400={dragging}
|
||||
class:whitespace-nowrap={!wrap}
|
||||
>
|
||||
<Upload
|
||||
flex={false}
|
||||
|
@ -8,6 +8,24 @@
|
||||
];
|
||||
|
||||
let values = [[1, "Two", "Three"]];
|
||||
|
||||
const src_two = [
|
||||
[
|
||||
"Hello my name is frank, I am liking the small turtle you have there. It would be a shame if it went missing.",
|
||||
"Hello my name is frank, I am liking the small turtle you have there. It would be a shame if it went missing.",
|
||||
"Hello my name is frank, I am liking the small turtle you have there. It would be a shame if it went missing."
|
||||
],
|
||||
[
|
||||
"Hello my name is frank, I am liking the small turtle you have there. It would be a shame if it went missing.",
|
||||
"Hello my name is frank, I am liking the small turtle you have there. It would be a shame if it went missing.",
|
||||
"Hello my name is frank, I am liking the small turtle you have there. It would be a shame if it went missing."
|
||||
],
|
||||
[
|
||||
"Hello my name is frank, I am liking the small turtle you have there. It would be a shame if it went missing.",
|
||||
"Hello my name is frank, I am liking the small turtle you have there. It would be a shame if it went missing.",
|
||||
"Hello my name is frank, I am liking the small turtle you have there. It would be a shame if it went missing."
|
||||
]
|
||||
];
|
||||
</script>
|
||||
|
||||
<Table
|
||||
@ -19,3 +37,13 @@
|
||||
label={"Data"}
|
||||
/>
|
||||
<button class="gr-button" on:click={() => (values = src)}>Populate</button>
|
||||
|
||||
<Table
|
||||
wrap={true}
|
||||
values={src_two}
|
||||
headers={["Num", "Two", "Three"]}
|
||||
col_count={[3, "dynamic"]}
|
||||
editable
|
||||
row_count={[3, "dynamic"]}
|
||||
label={"Data"}
|
||||
/>
|
||||
|
Loading…
x
Reference in New Issue
Block a user